元素居中的两种方法，transform和margin
1.transform :translate(-50%,-50%)
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0
} .box {
width: 100%;
height: 100%;
background: red
} .div1 {
width: 200px;
height: 200px;
background: black;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
</style>
</head> <body>
<div class="box">
<div class="div1"></div>
</div> </body> </html>
2.top，bottom,left,right和margin：auto
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0
} .box {
width: 100%;
height: 40%;
background: red;
position: relative
} .div1 {
width: 200px;
height: 200px;
background: black;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto
}
</style>
</head> <body>
<div class="box">
<div class="div1"></div>
</div> </body> </html>
元素居中的两种方法，transform和margin的更多相关文章
- jquery阻止元素冒泡的两种方法
通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...
- js中如何删除某个元素下面的所有子元素？（两种方法）
js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结 方法一:通过元素的innerHTML属性 元素element.innerHTML=""; 方法二:通过元素的remo ...
- Qt中的布局浅析与弹簧的使用，以及Qt居中的两种方法
1. 布局 为什么要布局: 布局之后窗口的排列是有序的 布局之后窗口的大小发生变化, 控件的大小也会对应变化 如果不对控件布局, 窗口显示出来之后有些控件的看不到的 布局是可以嵌套使用 常用的布局方式 ...
- 使用CSS完成元素居中的七种方法
在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
- 网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...
- CSS绝对定位元素居中的几种方法
转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html 作者:PajamaCat 1,div宽度未知1 <body> <d ...
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...
- JS动态创建元素（两种方法）
前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
- Selenium webdriver定位iframe里面元素两种方法
以东方财富网登录页面为例: 在查找元素过程中,直接通过id或者xpath等找不到元素,查看页面源代码发现元素是属于iframe里,例如: <div class="wrap_login& ...
随机推荐
- Python3.x 基础练习题100例（31-40）
练习31: 题目: 请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续判断第二个字母. 分析:用情况语句比较好,如果第一个字母一样,则判断用情况语句或if语句判断第二个字母. 程序 ...
- Docker 一次性进程与对话进程
目录 一次性进程 对话进程 退出的方法 参考 Docker在运行程序的时候,需要区分运行的程序是一次性进程还是对话进程,不同的进程操作方式有差异. 一次性进程 一些简单进程是不需要交互的,比如hell ...
- mac 下如何轻松安装神器 Anaconda
本文推荐使用homebrew 安装 1.打开终端执行 brew cask install anaconda3 然后就可以喝一杯咖啡了,终端会自动执行安装好 如果终端卡在update homebrew ...
- 干货！！！测试如何确定是前端bug还是后端bug
目前的项目大多数都是前后端分离的,当我们发现bug后不知道指派给哪位开发,指派错了不仅影响解决bug 的效率,还容易被开发怼.最主要的是人家会认为你不专业,不专,不专呀.废话少说,上干货(踩过的坑)! ...
- MySQL 异常有这一篇就够了！
摘要:在本文中,总结了开发过程中最为常见的几种 MySQL 抛出的异常以及如何解决,包括高版本驱动的问题.时区配置问题.SSL 连接问题等,是一篇经验总结贴. 前言 在本文中,总结了开发过程中最为常见 ...
- c++指针类型的函数
下面随笔将讲述c++指针类型的函数. 原创链接:https://www.cnblogs.com/iFrank/p/14444379.html 指针类型的函数 若函数的返回值是指针,该函数就是指针类型的 ...
- 剑指 Offer 55 - II. 平衡二叉树 + 平衡二叉树(AVL)的判断
剑指 Offer 55 - II. 平衡二叉树 Offer_55_2 题目描述 方法一:使用后序遍历+边遍历边判断 package com.walegarrett.offer; /** * @Auth ...
- pytorch（13）卷积层
卷积层 1. 1d/2d/3d卷积 Dimension of Convolution 卷积运算:卷积核在输入信号(图像)上滑动,相应位置上进行乘加 卷积核:又称为滤波器,过滤器,可认为是某种模式,某种 ...
- 【RocketMQ源码分析】深入消息存储（1）
最近在学习RocketMQ相关的东西,在学习之余沉淀几篇笔记. RocketMQ有很多值得关注的设计点,消息发送.消息消费.路由中心NameServer.消息过滤.消息存储.主从同步.事务消息等等. ...
- C# 应用 - 多线程 5) 死锁
两个线程中的每一个线程都尝试锁定另外一个线程已锁定的资源时,就会发生死锁. 两个线程都不能继续执行. 托管线程处理类的许多方法都提供了超时设定,有助于检测死锁. 例如,下面的代码尝试在 lockObj ...