水平居中
一个方法就可以:给div设置一个宽度,然后添加 margin:0 auto 属性。
任意的position属性都可以。(fixed absolute relative static)
div{
width:200px;
margin:0 auto;
}
水平垂直都居中
方法一:通过绝对定位实现
div{
position:absolute;
width:300px;
height:300px;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
background-color:purple;
}
方法二:设置层的外边距把div的中心点移到包含块的原点位置,再通过相对定位或者绝对定位向下向右移动50%;
要保证包含块有高度。
当position设置为relative时,若要使div在浏览器窗口垂直水平居中,需要将body以及html的height都设置为100%。
div{
position:relative; /*或者absolute*/
width:600px;
height:400px;
margin:-300px 0 0 -200px;
top:50%;
left:50%;
background-color:purple;
}
提示:
使用百分比单位时:
乘以包含块的高度 top, bottom, height, max-height, min-height。
乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width 。
方法三:容器高度不定,采用“transform”属性
div{
position:relative; /*或者absolute*/
width:600px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background-color:purple;
}
注意:transform属性需要考虑浏览器兼容问题,加上不同内核前缀。
方法四:利用flex布局
.container{
display:flex;
display:-webkit-flex; /*浏览器兼容*/
align-items:center; /*垂直居中*/
justify-content:center; /*水平居中*/
}
.container div{
width:100px;
height:200px;
background-color:purple;
}
参考:
flex布局详解