css垂直水平居中对齐的实现方式

这里的demo都只是针对现代浏览器所做，未兼容低版本的IE以及其它非主流浏览器。

---

1.使用绝对定位和负外边距对块级元素进行垂直居中

<div id="box">
    <div id="child">我是测试DIV</div>
</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 200px;// 或者是百分比
    height: 100px;
    background: orange;
    position: absolute;
    top: 50%;
    left: 50%
    margin: -50px 0 0 -100px;

}

注意：　这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。*

---

2. 使用绝对定位和transform

<div id="box">
    <div id="child">我是测试DIV</div>
</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    background: #93BC49;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
}

注意：这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了，因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

---

3. 绝对定位结合margin: auto

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 200px;
    height: 100px;
    background: #A1CCFE;
    position: absolute;
    top: 0;
    left:0;
    right:0;
    bottom: 0;
    margin: auto;
    line-height: 100px;
}

---

4. 使用flex布局

<div id="box">
    <div id="child">
        程序员怎么才能保护好眼睛？
    </div>
</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}
#child {
    width: 300px;
    height: 100px;
    background: #8194AA;
    line-height: 100px;
}

　flex布局（弹性布局/伸缩布局）里门道颇多，这里先针对用到的东西简单说一下，想深入学习的小伙伴可以去看阮一峰老师的博客。（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）
　　flex也就是flexible，意为灵活的、柔韧的、易弯曲的。
　　元素可以通过设置display:flex;将其指定为flex布局的容器，指定好了容器之后再为其添加align-items属性，该属性定义项目在交叉轴（这里是纵向轴）上的对齐方式，可能的取值有五个，分别如下：
　　flex-start:：交叉轴的起点对齐；
　　flex-end：交叉轴的终点对齐；
　　center：交叉轴的中点对齐；
　　baseline：项目第一行文字的基线对齐；
　　stretch（该值是默认值）：如果项目没有设置高度或者设为了auto，那么将占满整个容器的高度。

---