CSS | 居中

本文整理自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%)
}