CSS居中对齐的各种方式

        在调CSS样式的时候，居中对齐是一种很常见的需求，我们可能会苦恼怎么实现才会更好，这就有必要了解CSS实现居中对齐的各种方式了，居中对齐就有水平居中和垂直居中。

水平居中

        水平居中首先要区分居中的对象是行内元素还是块级元素。行内元素直接用text-align:center设置就可以了，十分简单。

        块级元素的实现方式就比较多了，可以使用margin:0 auto设置外边距自适应来实现水平居中。如果是通过绝对定位absolute的元素可以使用left:50%+margin-left负值（宽度/2）来实现，缺点就是需要知道子元素的宽度，不能满足某些子元素宽度不确定的情况，但我们可以通过在外部包裹一层元素来解决这个问题。

<style>
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            border: 2px solid black;
        }
​
        .out {
            position: absolute;
            left: 50%;
            top: 50%;
        }
​
        .in {
            height: 100px;
            width: 100px;
            background-color: pink;
            margin-left: -50%;
            margin-top: -50%;
        }
    </style>
    
    <div class="box">
        <div class="out">
            <div class="in">测试内容</div>    
        </div>    
    </div>

        效果下所示，通过在子元素外部包裹一层div，来代替子元素的绝对定位，外部div通过子元素的宽高自适应，来作用于子元素的margin-left的百分比，从而达到水平居中对齐的目的。

        还有一种方式不需要知道子元素的宽度也是能够让绝对定位的元素居中，甚至不需要包裹div，我们需要设置绝对定位的left和right都为0，然后设置margin:0 auto就可以了。

        当然，现在最流行的flex布局可以通过justify-content:center十分简单的实现，随着浏览器的发展，flex的兼容性已经很好了，flex对我们前端开发人员来讲十分重要，不管是面试还是工作中都需要，如果还不熟的同学建议赶紧学。

垂直居中

        垂直居中同样需要区分行内元素和块级元素，行内元素设置inline-height等于height就可以简单实现，这个是个很常见的技巧。

        块级元素可以通过绝对定位absolute，设置top:50%加margin负值（高度/2），就如同水平居中那样，也可以通过transform(-50%,-50%)来设置，但transform作为CSS3的新特性，兼容性对于一些老版本的浏览器还不是很友好，具体使用还是要根据项目而定。像水平居中那样，垂直居中也能通过包裹div或者设置top、bottom为0+margin:auto 0来实现垂直居中。

        当然，万能的flex设置align-items:center也是能轻松解决垂直居中的，可见弹性布局的便利与简洁，这还不赶快去学。