标签：
一、单行文本垂直居中
HTML：
<div id="parent"> <div id="child">Content here</div> </div>
CSS：
#child { line-height: 200px; }
二、垂直居中一张图片
HTML
<div id="parent"> <img src="image.png" alt="" /> </div>
CSS
#parent { line-height: 200px; } #parent img { vertical-align: middle; }
以下CSS代码，都以本HTML为基础：
HTML
<div id="parent"> <div id="child">Content here</div> </div>
三、块级元素
CSS
#parent { position: relative; height: 200px; width: 200px; background: #090; } #child { background: #900; position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; }
四、通用
CSS
#parent { border: 1px #111 solid; height: 200px; display: table; } #child { /* 无法设置宽高*/ display: table-cell; vertical-align: middle; }
五、通用，但在IE版本低于7时不能正常工作
CSS
#parent { position: relative; height: 200px; width: 200px; background: #090; } #child { background: #900; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto; }
六、通用
CSS
#parent { background: #090; padding: 5% 0; } #child { background: #900; padding: 10% 0; }
七、通用
HTML
<div id="parent"> <div id="floater"></div> <div id="child">Content here</div> </div>
#parent { background: #090; height: 250px; } #child { background: #900; clear: both; height: 100px; } #floater { float: left; height: 50%; width: 100%; margin-bottom: -50px; }
参考文章《vertical-centering》
标签：
原文地址：http://www.cnblogs.com/a418120186/p/5387843.html
