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

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

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

#child {
line-height: 200px;
}

CSS垂直居中方法总结（部分翻译）
ｄｅｍｏ
ｐｓ：对于子节点的ＤＯＭ设置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;
}

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

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

5，设置padding
CSS垂直居中方法总结（部分翻译）

<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

<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;
}

秒客网