本文整理自CSS居中完整指南和六种实现元素水平居中
水平居中
行内元素
在块级父容器中让行内元素居中,只需使用 text-align: center
;
这种方法可以让
inline
/inline-block
/inline-table
/inline
/flex
等类型的元素实现居中。
块级元素
.center{
width: 50px;
margin: 0 auto;
}
多个块级元素居中
通过inline-block
实现
/*html*/
<div>
<div class="box">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</div>
.box {
text-align: center;
}
.box li {
display: inline-block
}
通过相对定位和浮动实现
.box {
position: relative;
}
.box ul {
position: relative;
float: left;
left: 50%;
}
.box li {
display: block;
position: relative;
float: left;
right: 50%;
}
绝对定位实现居中
/*知道宽度*/
.center{
position: absolute;
width: 宽度值;
left: 50%;
margin-left: -(宽度值/2);
}
/*不知道宽度*/
.box {
position: relative;
}
.box ul {
position: absolute;
left: 50%;
}
.box li {
display: block;
position: relative;
float: left;
right: 50%;
}
垂直居中
行内元素
/*1*/
.center{
vertical-align: middle;
line-height: 20px;
}
/*2*/
.center{
padding-top: 20px;
padding-botton: 20px;
}
块级元素
/*知道高度*/
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
/*不知道高度*/
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
/*以自身为参照物*/
transfrom: translateY(-50%)
}
flexbox实现垂直居中
.parent{
display: flex;
flex-direction: column;
justify-content: center;
}
水平垂直居中
宽高固定
.parent {
position: relative;
}
.child {
width:300px;
height:100px;
padding:20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
宽高不固定
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transfrom: translate(-50%,-50%)
}
使用transfrom
有一个缺陷,如果计算结果含有小数,会让整个元素看起来是模糊的,一种解决方案就是为父级元素设置 transform-style: preserve-3d;
样式
.parent {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transfrom: translate(-50%,-50%)
}