CSS垂直居中方法总结（部分翻译）

１，利用设置行高
（1）单行文本垂直居中，

<div id="parent"><div id="child">Text here</div></div>

#child {line-height: 200px;}

ｄｅｍｏ
ｐｓ：对于子节点的ＤＯＭ设置line-height,使line-height等于height高，这对于节点元素是单行文本的较有效。其中这个行高比字体大小大哦~
（2）居中图片

<div id="parent">    <img src="image.png" alt="" /></div>

#parent {    line-height: 200px;}#parent img {    vertical-align: middle;}

本方法中行高需要比图片高度设置的更高。再对图片设置vertical-align:middle;

2，利用CSS表格（不是html表格）

<div id="parent">    <div id="child">Content here</div></div>

#parent {display: table;}#child {    display: table-cell;    vertical-align: middle;}

demo
将父节点设置为表格表示tabel-cell，之后可以在子节点上使用vertical-align:middle.则子块div里头的元素会垂直居中

在低版本的IE浏览器中，要添加：

#child {    display: inline-block;}

3，对于块级元素
demo

<div id="parent">    <div id="child">Content here</div></div>

#parent {position: relative;}#child {    position: absolute;    top: 50%;    left: 50%;    height: 30%;    width: 50%;    margin: -15% 0 0 -25%;}

与前两种方法最大的不同，此方法针对块级元素，而且对各个浏览器的适配比较好。

4，streching
demo

<div id="parent">    <div id="child">Content here</div></div>

#parent {position: relative;}#child {    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    width: 50%;    height: 30%;    margin: auto;}

对于top,bottom,left,right四个边设置为0，并且把margin:auto。
但是对IE7以下的不兼容。和上一个方法一样的是，如果子块的内容太多太大，大过父元素的话，大的部分会被隐藏。

5，设置padding

demo

<div id="parent"><div id="child">Content here</div></div>

#parent {    padding: 5% 0;}#child {    padding: 10% 0;}

里头的数值是需要自己计算的。比如说，父元素是400Px 的高度，子元素是100px的高度，我们就需要150px对于上下的padding。

150 + 150 + 100 = 400

则设置时根据百分比计算即可。
其实这里面的padding用margin也无所谓，根据项目需要。

6，FLoat

demo

<div id="parent"><div id="floater"></div><div id="child">Content here</div></div>

#parent {height: 250px;}#floater {float: left;height: 50%;width: 100%;margin-bottom: -50px;}#child {clear: both;height: 100px;}

将一个空的div浮动在我们的子元素之上，并且设置它的高度宽度都是父元素的50%。就像是充满了上半部分的父元素。

因为有浮动，所以在子元素上我们需要clear:both,清除浮动。
子元素的上部分边现在应该是在float层的下部分边。为了居中，
将子元素往上移动它的一半高度，就是例子中的100px/2=50px,所以margin-bottom: -50px;

这个方法适用于大部分浏览器。在使用这个方法居中的时候，必须要知道子元素的高度。

7，有关于FLEX的种种。
其实在不定宽高的垂直居中中，

{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);position:absolute;}

比较常用，但如果涉及到FELX,
可以使用以下进行垂直居中。

#parent{justify-content:center;align-items:center;display:-webit-flex;}

但是以上对于flex的还是在IE7下不兼容哇咔咔。
所以为了保险的话，用旧flex,

#flexbox{display:-webkit-flex-box;-webkit-flex-box:1;box-pack:center;box-align:center;}

http://vanseodesign.com/css/vertical-centering/

• 本文部分翻译以上链接