CSS实现垂直居中

方案一：line-height

适用于单行文本，
居中前：

<div class="vertical">居中元素</div>.vertical {            height: 100px;            line-height:100px;            border: 1px solid red;        }

居中后：

说明：这种对于单行的文本很有效果
适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效果极差，差到让你感到恶心。

这种方法对运用在小元素上是非常有用的，比如说让一个button、图片或者单行文本字段。

    <div class="vertical">        <p> 居中元素</p>        <p>另一个文本呢</p>    </div>

效果极差

因为line-height是行高，所以每行之间的间距就是100px;

方案二：设置绝对定位，高度(top)和margin-top为高度的一半

    <div class="container">        <div class="vertical">            居中元素        </div>    </div>/---css-------/        .container {            position: relative;            border: 1px solid blue;            height: 200px;        }        .vertical {            height: 100px;            position: absolute;            top: 50%;            margin-top: -50px;            border: 1px solid red;        }

实现了中间那个红框元素的居中

优点：在各大浏览器都能适用；
缺点: 基于绝对定位来的，一定要把握住父元素是谁

另外此方法是通过绝对定位来实现的，那么用这种方法实现元素的垂直居中需要注意以下几点：其一元素定位关系到一个相对定位参考，所以要保证元素是相对于哪个为参考坐标；另外需要设置给元素明确定一个高度值并且给元素设置一个负值的margin-top，而且值为元素高度的一半。

这里我建议大家给元素定一个宽度值，因为元素进行绝对定位后脱离文档流，其宽度是根据元素内容所占宽度来计算的（不是100％），为这能让其视觉效果更好，最好给元素定义一个宽度值。

方案三：利用table-cell实现垂直居中

使用div模拟表格布局

        .container {            position: relative;            border: 1px solid blue;            height: 200px;            display: table;        }        .vertical {            display: table-cell;            vertical-align: middle;            border: 1px solid red;        }

html

    <div class="container">        <div class="vertical">            居中元素        </div>    </div>

优点：此方法没有高度限制，不会出现滚动条等问题；
缺点：
不兼容ie6 ie7；
因为display:table在IE6-7中不被支持

方案四：在居中元素前加一个空的浮动元素

这个浮动元素的高度设置为容器的一半；margin-bottom设置为居中元素高度的一半；

如图：这里我用了一个绿色的border来展示这个隐藏元素；可以看到其实就是它把那个位置占据了，因此居中元素就自动往下平移了；

        .container {            position: relative;            border: 1px solid blue;            height: 400px;            width: 400px;            display: table;        }        .vertical {            height: 300px;            clear: both;            border: 1px solid red;        }        .floater {            float: left;            height: 50%;            margin-bottom: -150px;            border: 5px solid green;        }

html

    <div class="container">        <div class="floater"></div>        <div class="vertical">        </div>    </div>

利用padding

    <div class="columns">        <div class="item">test</div>    </div>

        .columns {            position: relative;            border: 1px solid blue;            /* height: 400px; */            width: 400px;            display: table;        }        .item {            padding-top: 30px;            padding-bottom: 30px;        }

要点：设置上下一样的padding；
缺点：外容器高度固定不能达到效果
外容器高度不固定：

高度固定（height:400px）:

就不居中了

原文链接：http://www.w3cplus.com/css/vertically-center-content-with-css