1.图片水平垂直居中
html: ????<div class="parent"> ???????<div class="child"> ??????????<img src="xxx/demo.png"> ???????</div> ?????</div>css: ????.parent{ ???????display: table ????} ????.parent .child { ???????display: table-cell; ???????*display: inline-block; ???????text-align: center; ???????vertical-align: middle; ????} ????.parent .child img{ ???????border: none; ???????width: 200px; ???????height: 200px; ???????vertical-align: middle; ????}注： IE修复: *display: inline-block; 由于vertical-align属性与表格一起使用，我们将父DIV设置为display: table, 并将子DIV设置为单元格display: talbe-cell.然后我 们可以安全的使用vertical-align：middle 来垂直单元格中的内容.此方法适用于多行文本，容器DIV随内容动态增长，不幸的是不工作于IE6、IE7中。
2. 绝对定位和垂直拉伸
html: ????<div class="parent"> ???????<div class="child">content here</div> ????</div> ?css: ?????.parent { ????????position: relative; ?????} ?????.parent ?.child { ????????position: absolute; ????????top: 0; ????????right: 0; ????????bottom: 0; ????????left: 0; ????????margin: auto; ????????width: 50%; ????????height: 50%; ?????}注： 子DIV处于父DIV中，它的顶部，底部，左侧，右侧的值都设为0。因为子DIV的高度和宽度都设置为小于父DIV的高度和宽度，所以这种定位是不行的。将子DIV的4个边框都设置为auto会在顶部和底部以及左右两侧产生同等的边距，这导致子DIV同时水平和垂直居中，不幸的是IE7以下不支持。
3.填充
html: ???<div class="parent"> ???????<div class="child">content here</div> ???</div>css: ???.parent { ??????padding: 5% 0; ???} ???.parent .child { ??????padding: 10% 0; ???}注: 相同顶部和底部填充用于使子DIV在父DIV居中，并使子DIV中的文本居中。padding设置为"%"，允许两个DIV动态增长。 如果任何元素的高度都设置绝对测量，则需要一些数学知识来确保顶部和底部填充相同。虽然这个方法是在容器上设置paddings，你可以翻转事物，并在包含的元素中设置边距。
4.lineHeight
html: ??<div class="parent"> ????<div class="child">content here</div> ??</div>css: ??.child { ???????line-height: 200px; ???}注: 垂直居中通过给子div（包含文本的那个）一个大于字体大小的行高来实现。有些也设置一个高度等于这个div上的行高，但我还没有发现它的必要。这将工作于垂直居中一行文本，但不会工作在多行文本。
5.定位和负边距
html: ???<div class="parent"> ???????<div class="child"></div> ???</div>css: ??.parent{ ???????position: relative ???} ???.parent .child { ??????position: absolute; ?????top: 50%; ?????left: 50%; ?????width: 200px; ?????height: 200px; ?????margin: -100px 0 0 -100px; ????}注: 子DIV通过定位和边距定位在父DIV中心，通过将子DIV的顶部和左侧的值设为50%，子DIV的左上角位于父DIV的中心。负顶部和左侧等于元素高度和宽度的一半，向上拉伸子DIV让它处于父DIV中心。此方法最适合于块级元素，并且它需要知道子DIV的维度。
6.浮动分区
html: ??<div class="parent"> ??????<div class="floater"></div>; ???????<div class="child">content here</div> ????</div>css: ??.parent{ ????????height: 200px; ?????} ?????.parent .floater { ????????float: left; ????????height: 50%; ????????width: 100%; ????????margin-bootm: -50px; ????????border: 1px solid red; ?????} ?????.parent .child { ???????clear: both; ???????height: 100px; ???????outline: 1px solid yellow; ?????}注: 这里，一个空的div设置为父div的一半高度并向左（或右）浮动。我们想要居中的div然后被清除，所以它的顶边将直接位于浮动div的底边下方。为了使子div的垂直中心向上，我们为浮动div添加一个负的下边距，它等于子div的一半高度。
转载自：http://frontenddev.org/article/introduction-to-vertical-in-the-css-in-several-ways.html
css 垂直居中的几种方法
原文地址：http://www.cnblogs.com/LiberBlog/p/7811169.html