如何将一个div水平垂直居中

方案一:

div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】,

兼容性:,IE7及之前版本不支持

div{            width: 200px;            height: 200px;            background: green;            position:absolute;            left:0;            top: 0;            bottom: 0;            right: 0;            margin: auto;        }

方案二:

div绝对定位水平垂直居中【margin 负间距】     这或许是当前最流行的使用方法。

div{            width:200px;            height: 200px;            background:green;            position: absolute;            left:50%;            top:50%;            margin-left:-100px;            margin-top:-100px;        }

方案三:

div绝对定位水平垂直居中【Transforms 变形】

兼容性:IE8不支持;

div{            width: 200px;            height: 200px;            background: green;            position:absolute;            left:50%;    /* 定位父级的50% */            top:50%;            transform: translate(-50%,-50%); /*自己的50% */        }

方案四:

css不定宽高水平垂直居中

.box{             height:600px;             display:flex;             justify-content:center;             align-items:center;               /* aa只要三句话就可以实现不定宽高水平垂直居中。 */        }        .box>div{            background: green;            width: 200px;            height: 200px;        }

方案五:

将父盒子设置为table-cell元素,可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构

<p class="outerBox tableCell">  </p><p class="ok">    </p><p class="innerBox">tableCell</p>  <p></p><p></p>/*table-cell实现居中将父盒子设置为table-cell元素,设置text-align:center,vertical-align: middle;子盒子设置为inline-block元素*/.tableCell{  display: table;}.tableCell .ok{  display: table-cell;  text-align: center;  vertical-align: middle;}.tableCell .innerBox{  display: inline-block;}

方案六:

对子盒子实现绝对定位,利用calc计算位置

<p class="outerBox calc">    </p><p class="innerBox">calc</p><p></p>/*绝对定位,clac计算位置*/.calc{  position: relative;}.calc .innerBox{  position: absolute;  left:-webkit-calc((500px - 200px)/2);  top:-webkit-calc((120px - 50px)/2);  left:-moz-calc((500px - 200px)/2);  top:-moz-calc((120px - 50px)/2);  left:calc((500px - 200px)/2);  top:calc((120px - 50px)/2);}