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

方法一：
????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绝对定位水平垂直居中【Transform变形】，兼容性：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; /*垂直居中*/
/* 只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
background: green;
width: 200px;
height: 200px;
}

【如何将一个div水平垂直居中】方法五：将父级设置为table-cell元素，可以使用text-aligin:center和vertical-align:middle实现水平垂直居中，比较完美的方法是利用三层结构模拟父子结构

.tableCell{
width: 100px;
height: 100px;
display: table;
}
.tableCell .ok{
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: yellow;
}
.tableCell .innerBox{
display: inline-block;
background-color: green;
}

tableCell

方法六：对盒子实现绝对定位，利用calc计算位置

.calc{
position: relative;
width: 500px;
height: 120px;
background-color: yellow;
}
.calc .innerBox{
width: 200px;
height: 50px;
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);
background-color: green;
}