一、水平居中
1、行内元素,对其父元素设置text-align:center
2、块级元素,如果它有固定的宽度,对自身设置margin: 0 auto;
如果没有固定的宽度,借助css3变形属性transform来实现
position:absolute;
left:50%;
transform:translateX(-50%);
二、垂直居中
1、行内元素垂直居中
1)单行文本垂直居中
设置元素的高度height等于元素的行高line-height
2)多行文本的垂直居中
- 不固定高度的垂直居中:通过设置padding实现
- 固定高度的多行文本:将display设置为table,配合样式vertical-align:middle实现
.wrap{
height:200px;
display:table;
}
.content{
vertical-align:middle;
display:table-cell;
width:200px;
border:1px solid #ccc;
}
2、块级元素垂直居中
1)元素有固定宽高
.container{
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
}
2)不固定宽高
.container{
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
三、基于视口单位的解决方案
基于绝对定位的方案虽然不错,但是对于整个布局影响非常强烈。如果不适用绝对定位,想把元素相对于视口进行居中,可以采用视口长度单位。
<div class="container">
sdsfsf
</div>
.container {
width: 200px;
padding: 20px;
margin: 50vh auto 0;
transform: translateY(-50%);
background: #ccc;
}
四、基于Flexbox的解决方案
Flexbox是目前推荐的最佳解决方案,专门针对这类需求设计,但是浏览器对flexbox的支持程度没有之前方案兼容性高,但是在移动端开发中完全可以使用。
<div class="container">
sdsfff
</div>
body {
display: flex;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background: #d00;
}
.container {
margin: auto;
background: #ccc;
padding: 20px;
}
当使用flexbox的时候,样式margin设置为auto不仅在水平方向上居中,在垂直方向上同样居中,如果仅需要单独的垂直居中,需使用align-self设置为center。