1.负margin法:这是比较常用的方法,在知道元素的宽高的前提下才能使用
<div id="a"></div>
#a{
height:300px;
width:300px;
position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-150px;
}
注:负margin是个非常有意思的用法,深入了解后会发现他在布局上相当有用。
优点:代码量少,兼容性好。
缺点:非响应式方法,内容可能会超出容器。
2.transform法:
<div id="a"></div>
#a{
width: 50%;
height: 20%;
background: green;
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
}
优点:代码量少;宽高可变,相应式布局
缺点:不支持IE8,可能需要带供应商前缀
3.Flexbox法
<div class="vertical-container">
<div class="a"></div>
</div>
.vertical-container {
height: 300px;
width: 300px;
background: #ccc;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.a{
width: 200px;
height: 200px;
background: green;
}
4.“完全水平垂直居中”:必须要设置元素的高度,图片自身有高度的可以不设。
<div id="a"></div>
#a{
width: 200px;
height: 200px;
background: red;
margin:auto;
position: absolute;
top:0;left:0;right: 0;bottom: 0;
}
优点:代码量少,兼容性好
几种可以让元素水平垂直居中的方法
最新推荐文章于 2023-08-12 22:49:16 发布