跬步-CSS实现水平垂直居中

CSS实现居中，无论在实际开发和面试都是常见的内容。

本文总结了实现居中常见的几种方式，包含宽度已知/未知及兼容性的要求。

<style>
        .pn {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
        }

        .box {
            background-color: #eee;
        }

        .size {
            width: 100px;
            height: 100px;
        }
</style>
<body>
    <div class="pn">
        <div class="box size">啦啦啦</div>
    </div>
</body>

这一段是公共内容，pn类是父容器，box类代表需要居中的元素，size类控制是否定义高度。

line-height

利用行内元素高度和行高相同的居中效果，此方法常用于单行文本的垂直居中效果。

        .pn {
            line-height: 500px;
            text-align: center;
            font-size: 0;
        }

        .box {
            font-size: 14px;
            display: inline-block;
            line-height: initial;
            text-align: left;
        }

absolute margin负值

父元素设置为定位元素，子元素的绝对定位是基于父元素的宽高，这个效果可以达到居中的目的。

由于定位的基点是基于子元素的左上角，需要根据元素自身的尺寸做对应的偏移纠正。

此方法是最常用的居中方式，兼容效果好，需要已知子元素的高度。

        .pn {
            position: relative;
        }
        .box {
            position: absolute;
            top: 50%;
            left:50%;
            margin-top: -50px;
            margin-left: -50px;
        }

absolute auto

该方法同样是基于定位实现，先将子元素的定位都设置为0，再将margin设置为auto就可以实现居中。

兼容效果好，需要已知子元素的高度。

        .pn {
            position: relative;
        }
        .box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

absolute calc

该方法同样是基于定位实现，利用calc特性直接计算定位的偏移位置。

需要兼容css3的calc特性，已知子元素的高度。

        .pn {
            position: relative;
        }
        .box {
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
        }

absolute transform

该方法同样是基于定位实现，利用transform偏移自身的位置实现居中。

需要兼容css3的transform特性，不需要已知高度。

        .pn {
            position: relative;
        }
        .box {
            position: absolute;
            top: 50%;
            left:50%;
            transform: translate(-50%,-50%)
        }

table

利用table元素天然垂直居中的特性实现居中效果。

使用table做布局背离了语义化的初衷，也会产生很多冗余的代码，不建议使用。

        .pn{
            text-align: center;
        }
        .box{
            display: inline-block;
        }    

  <table>
        <tbody>
            <tr>
                <td class="pn">
                    <div class="box">啦啦啦</div>
                </td>
            </tr>
        </tbody>
    </table>

css-table

利用css的table属性，可以让普通元素拥有table元素的特性和效果。

原理和table一样，兼容效果好，不需要已知高度。

        .pn {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .box {
            display: inline-block;
        }

flex

flex是css3中最新布局方式，可以很方便实现各种布局效果。

利用flex的justify-content和align-items特性实现居中效果。

该方法实现简单，但是需要兼容flex特性。

        .pn {
            display: flex;
            justify-content: center;
            align-items: center;
        }

grid

grid是最新的布局方式，利用justify-self和align-self可以快速实现居中效果。

grid现在的兼容性不太好，使用时要注意。

        .pn{
            display: grid;
        }
        .box{
            justify-self: center;
            align-self: center;
        }