使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>
6、第六种
父div高度固定/不固定,子div不可设置高度宽度,实现水平垂直居中,此方式主要针对于文字内容的水平垂直居中。(注:去掉子div或用p代替子div一样可以使文字内容水平垂直居中)
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 800px;
height: 600px;
border:1px solid #666;
}
.my-div{
/*width: 400px;*/
/*height: 200px;*/
border: 1px solid blue;
}
<body>
<div class="box">
<div class="my-div">
父div高度固定/不固定,子div不可设置高度宽度,实现水平垂直居中,此方式主要针对于文字内容的水平垂直居中。(注:去掉子div或用p代替子div一样可以使文字内容水平垂直居中)
</div>
</div>
</body>