使div水平垂直居中的幾種方式：
1、第一種
父div高度寬度固定，相對定位；子div高度寬度固定，絕對定位。使用top:50%;left:50%;margin-left:-200px;margin-top:-150px;實現水平垂直居中。
缺點就是子div脫離文檔流
.my-div{
border:1px solid red;
width:400px;
height:300px;
position: absolute;
top:50%;
left:50%;
margin-left:-200px;
margin-top:-150px;
// transform: translate(-50%, -50%); // 此效果相當於 margin-left:-200px和 margin-top:-150px
}
<body>
<div style="width:800px;height:600px;border:1px solid blue;position: relative;">
<div class="my-div">
父div高度寬度固定，相對定位；子div高度寬度固定，絕對定位。使用top:50%;left:50%;margin-left:-200px;margin-top:-150px;實現水平垂直居中。
</div>
<div style="width:200px;height:100px;border:1px solid yellow">
我是子div2
</div>
</div>
</body>
2、第二種
父div高度寬度固定，相對定位；子div高度寬度不定，絕對定位，使用top:50%;left:50%; transform: translate(-50%, -50%);實現水平垂直居中。
缺點就是子div脫離文檔流
.my-div{
border:1px solid red;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
<body>
<div style="width:800px;height:600px;border:1px solid blue;position: relative;">
<div class="my-div">
父div高度寬度固定，相對定位；子div高度寬度不定，絕對定位，使用top:50%;left:50%; transform: translate(-50%, -50%);實現水平垂直居中
</div>
<div style="width:200px;height:100px;border:1px solid yellow">
我是子div2
</div>
</div>
</body>
3、第三種
父div高度寬度固定，相對定位；子div高度寬度不定，絕對定位；使用 left:0;top: 0;bottom: 0;right: 0;margin: auto;實現水平垂直居中。
缺點就是子div脫離文檔流
.my-div{
width: 400px;
height: 200px;
border:1px solid red;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
<body>
<div style="width:800px;height:600px;border:1px solid blue;position: relative;">
<div class="my-div">
父div高度寬度固定，相對定位；子div高度寬度不定，絕對定位；使用 left:0;top: 0;bottom: 0;right: 0;margin: auto;實現水平垂直居中
</div>
<div style="width:200px;height:100px;border:1px solid yellow">
我是子div2
</div>
</div>
</body>
4、第四種
父div高度寬度固定；子div高度寬度固定/不固定；使用flex佈局實現水平垂直居中。子div未脫離文檔流，不管子div高度寬度是否固定，都可以實現水平居中
缺點就是ie10+才支持使用flex佈局實現水平垂直居中
.box{
width:800px;
height:600px;
border:1px solid blue;
-webkit-display:flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
}
.my-div{
border:1px solid red;
}
<body>
<div class="box">
<div class="my-div">
父div高度寬度固定；子div高度寬度固定/不固定，使用flex佈局實現水平垂直居中。子div未脫離文檔流
</div>
</div>
</body>
5、第五種
父div高度寬度固定,相對定位；子div高度寬度固定，絕對定位，使用calc函數動態計算實現水平垂直居中。
缺點是子div未脫離文檔流
.box{
width: 800px;
height: 600px;
border: 1px solid blue;
position: relative;
}
.my-div{
position: absolute;
width: 400px;
height: 200px;
left:-webkit-calc((800px - 400px)/2);
top:-webkit-calc((600px - 200px)/2);
left:-moz-calc((800px - 400px)/2);
top:-moz-calc((600px - 200px)/2);
left:calc((800px - 400px)/2);
top:calc((600px - 200px)/2);
border:1px solid red;
}
<body>
<div class="box">
<div class="my-div">
父div高度寬度固定,相對定位；子div高度寬度固定，絕對定位，使用calc函數動態計算實現水平垂直居中。 子div未脫離文檔流
</div>
</div>
</body>