Div实现水平垂直居中
在实际应用中很多地方不仅要求实现元素的水平居中或者垂直居中效果，还可能会在水平方向和垂直方向上都要实现居中效果，下面就简单介绍几种元素水平垂直居中的方法（注：不同的方法会存在一些优缺点以及兼容性问题）
hmtl结构：
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
- 定位 + 负外边距
.parent{
position: relative;
width: 200px;
height: 200px;
background-color: blue;
}
.child{
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
background-color: #fff;
}
原理：元素设置定位并给定 50% 的top值和left值，再通过 负margin 将元素向左上移动自身宽高的一半（margin-top:-height/2; margin-left:-width/2），该方法前提是要知道元素的宽高
- 定位 + 平移
.parent{
position: relative;
width: 200px;
height: 200px;
background-color: green;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 50px;
height: 50px;
background-color: #fff;
}
原理：和上面方法类似，不同的是使用CSS3新增属性 transform 中的 translate 平移属性代替 margin属性，这样就是根据自身尺寸进行移动，缺点是由于为新增属性，兼容性自然就不是很好，远古IE不支持。
- 强大的 “margin:auto”
.parent {
position: relative;
width: 200px;
height: 200px;
background-color: deeppink;
}
.child {
position: absolute;
top: 0;
bottom:0;
left: 0;
right: 0;
width: 50px;
height: 50px;
margin: auto;
background-color: #fff;
}
原理：该方法的关键点是：1.绝对定位的（top、right、bottom、left）四个属性均要设置值为0；2.margin:auto，能够适用单个元素或者父子级元素，设置绝对定位并添加 margin:auto 属性就能够实现水平垂直居中，元素可自定义宽高，也可不设置（需要是自身存在尺寸的元素：img等），具体 绝对定位+margin:auto 的实现原理参考https://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/
- flex布局
div.parent{
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: red;
}
div.child{
width: 50px;
height: 50px;
background-color: lime;
}
//或者
div.parent{
display: flex;
width: 200px;
height: 200px;
background-color: red;
}
div.child{
width: 50px;
height: 50px;
margin:auto;
background-color: lime;
原理：通过给父元素设置display为flex，再设置 item 的主轴和辅轴的对齐方式，兼容性也不是很好（IE8+ 及大众浏览器），大多数用于移动端布局
- grid布局
.parent{
display: grid;
width: 200px;
height: 200px;
background-color:deepskyblue;
}
.child{
justify-self: center;
align-self: center;
width: 50px;
height: 50px;
background-color: #fff;
}
原理：和flex布局实现思路类似。
- 表格布局
.parent {
display: table-cell;
height: 200px;
width: 200px;
background-color: orange;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
以上内容参考自其它文章并结合自身理解，若存在错误请指出，谢谢！！！
Div实现水平垂直居中的更多相关文章
- div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...
- div盒子水平垂直居中的方法推荐
父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...
- css3 flex 详解,可以实现div内容水平垂直居中
先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...
- css的div动态水平垂直居中
div动态水平垂直居中,思路如下: (1)先定位.如果相对于距离最近的父元素,用absolute:如果相对于body,用fixed. (2)然后,top和left都设为50%. (3)要居中的di ...
- div盒子水平垂直居中的方法
这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...
- 总结div里面水平垂直居中的实现方法
最近经常碰到要垂直居中的问题,所以想着总结一下:关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: < ...
- CSS：div/img水平垂直居中
div水平垂直居中方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- div 内容水平垂直居中
对于前端布局来说.总有一些图片水平垂直居中老是不好看,影响整体美观,百度一大堆各种自适应方法,终于找到了一种比较简单,适用于所有场景的方法.. 1.对于布局来说.一个div搞定. <div id ...
- 关于div的水平垂直居中
水平垂直居中 一.未知宽高 1. table布局(display:table) 2. 转化为行内标签display:inline-block,借助另外一个标签高度来实现 3. 绝对布局(positio ...
随机推荐
- Java同步数据结构之SynchronousQueue
前言 严格来说SynchronousQueue并不是像它的名字那样是一种Queue,它更像是一个数据接力的交汇点,还记得在介绍Exchanger的时候提到过Exchanger可以看作是Synchron ...
- RotateDrawable
用来对Drawable进行旋转,也是通过setLevel来控制旋转的,最大值也是:10000 相关属性如下: fromDegrees:起始的角度,,对应最低的level值,默认为0 toDegrees ...
- 增加github访问速度
转自:https://blog.csdn.net/qq_38977097/article/details/80770987 原因 为什么慢?github的CDN被某墙屏了. 解决方法 绕过dns解析, ...
- 加载selenium库
一.maven的下载.解压以及环境变量配置 1.下载maven: 官网下载地址:http://maven.apache.org/download.cgi 在Files下面下载对应的maven版本(官网 ...
- jpa基于按annotation的hibernate主键生成策略
JPA注解持久化类很方便,需要jar包:ejb3-persistence.jar下载 一.JPA通用策略生成器 通过annotation来映射hibernate实体的,基于annotation的hib ...
- C# Winform中WebBrowser给网页中的input控件赋值/设置值
订阅WebBrowser的DocumentCompleted事件,在里面写入 private void browser_DocumentCompleted(object sender, WebBrow ...
- linux双机热备份
使用HeartBeat实现高可用HA的配置过程详解 一.写在前面 HA即(high available)高可用,又被叫做双机热备,用于关键性业务.简单理解就是,有2台机器 A 和 B,正常是 A 提供 ...
- golang web框架设计4：日志设计
beego的日志设计思路来自于seelog,根据不同的level来记录日志,beego设计的日志是一个轻量级的,采用系统log.Logger接口,默认输出到os.Stdout,用户可以实现这个接口然后 ...
- 【ARM-Linux开发】wubi.exe安装Ubuntu14.04出现为/检查磁盘时发生严重错误的解决方法
原文:http://jingyan.baidu.com/article/0aa22375bbffbe88cc0d6419.html 我写过一篇叫做 如何硬盘装麒麟系统 的经验,介绍了如何不使用优盘的情 ...
- Vue.js 关于双向绑定的一些实现细节
Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的. 当把一个普通 Javascript 对象传给 Vue 实例来作 ...