关于CSS的垂直居中

第一次写，有点紧张

在页面中，垂直居中是个老大难的问题，方法各种各样，我这边列举了我最喜欢的方便的几个方法：

1.父元素高度一定，单行文本垂直居中

html部分：

<div class="outside single-line">        我是单行内容</div>

css部分：

.outside {margin: 10px auto;        width: 250px;        height: 200px;        border: 3px solid #069;}/* 单行 */.single-line {        line-height: 200px;}

这个最简单，单行文本，父元素高度一定，直接设置line-height = 父元素高度就行了。

2.父元素高度一定，多行文本居中

html部分：

<div class="align_box_2">        <span class="align_word">这里的文字用来做多行文字垂直居中对齐的测试。        这是第二行文字，您还可以再<a href="javascript:;">添加</a>一行文字做测试！        </span></div>

css部分：

.align_box_2 {        display:table-cell;         width:550px;         height:250px;         border:4px solid #beceeb;         color:#069;         vertical-align:middle;}

这里使用table-cell，使用vertical-align: middle来定位，像表格一样定位，也可以适用于图片垂直定位，详细的讲解可以戳这里。

3.父元素高度不一定，子元素高度一定

这种情况也比较常见，方法很多人也肯定知道。

html部分：

<div class="out-auto">        <span class="text">            我是内容，父元素的高度不一定，但是我的内容高度是不变的，要把我居中...        </span></div>

css部分：

.out-auto {        position: relative;        margin: 10px auto;        width: 200px;        height: 200px;        border: 3px solid #000;}.out-auto .text {        position: absolute;        top: 50%;        margin-top: -50px;        height: 100px;        border: 1px dashed #ccc;}

这种方法其实很巧妙，先是绝对定位，top值为50%，找到中间的垂直的基准线，在通过margin-top上移子元素高度的一半来达到垂直居中的效果，这种不管父元素高度怎么变，只要子元素高度不变，定位一定没问题，而且兼容性比较好。

4.父元素高度不定，子元素高度不定

一般像这种情况也可能在实际中会遇到比较多，比如手机端预览图片等等。

html部分：

<div class="out-auto">        <div class="inside-auto">            我的高度不定，我的父元素的高度也不定，但是要居中        </div></div>

css部分：

.out-auto {        position: relative;        margin: 10px auto;        width: 200px;        height: 200px;        border: 3px solid #000;}.inside-auto {        position: absolute;        top: 50%;        border: 1px dashed #069;        transform: translateY(-50%);        -webkit-transform: translateY(-50%);        -o-transform: translateY(-50%);        -ms-transform: translateY(-50%);}

这个方法使用C3的transform属性，原理与上一中绝对定位上移的原理一致，translateY(-50%)上移自身的一般高度，不过兼容性有限，在不考虑低版本浏览器的情况下，这种方法真的是太太太好用了，我也一直使用这种方法，即节省代码又效率高，PC移动都适用。

题外话：

在这里我在推荐一种方法，那就是flex布局，这种布局常见于移动端，有很多没见过的属性。

html部分：

<div class="v-flex">       <span class="v-item">           你好，我是flex布局       </span></div>

css部分：

.v-flex {        display: flex;         justify-content: center;        align-items: center;        border: 2px solid #069;        width: 100px;        height: 200px;}

flex布局很神奇很好用，我自己也还没有完全理解，现在很多移动端的框架都在使用这个，我也要与时俱进才行