在前端页面的布局方面，很多时候需要用到垂直居中，如果父集元素或子元素的高度是固定的那么垂直居中可以用line-height或者定位 top：50%；margin-top：- height/2 px；实现，那么如果父元素的高度和子元素的高度都不是固定值呢？
下面就总结一下使用css进行垂直居中布局的方法及使用环境。
html 使用如下：
<div class="parent">
?<div class="child"> </div>
</div>
1.父元素高度与子元素高度差值为固定值，对父元素使用padding使子元素居中
当父元素与子元素差值为固定值 H px 时，可以对父元素使用上下边的padding:H/2 px; 把子元素居中。
.parent{ ?width:200px; ?height:auto; ?padding:50px 0; ?background-color: #13B202;}.child{ ?width: 40px;height: 40px; ?margin:0 auto; ?background-color: #000;}效果如下：
2. 父集高度为固定值，父集使用 line-height ，子集使用 display:inline-box ;
对父元素使用line-height：父集的高度；
由于line-height只对行元素有效果，所以改变子元素的display属性为inline-block，这样，行元素即可以有行元素属性，又能够像块元素一样设置宽高。
最后对子元素设置vertical-align: middle; 使其在行高内垂直居中，这样居中布局就实现了。
.parent{ ?width: 200px; ?height: 200px; ?text-align: center; ?line-height: 200px; ?background-color: #13B202;}.child{ ?display: inline-block; ?width: 40px;height: 40px; ?vertical-align: middle; ?background-color: #000;}效果如下：
3.子元素高度固定，如果需要横向居中，子元素宽度也需固定，对子集使用定位 使其居中。
当子元素 的高度固定，无论父元素高度如何变化，子元素都可以通过 top:50%; margin-top: - 子元素高度/2 px ;使其垂直居中，这种一般用于父集高度不固定，会随着屏幕高度或者其他因素变化的情况使用，例如弹窗的垂直居中。对于水平方向的居中也一样，使用left：50%；margin-left：-子元素宽度/2 px ；
.parent{ ?position: relative; ?width: 100%; ?height: 100%; ?background-color: #13B202;}.child{ ?position: absolute; ?left: 50%; ?top: 50%; ?width: 40px; ?height: 40px; ?margin-left: -20px; ?margin-top: -20px; ?background-color: #000;}效果如下：
4. 父元素高度不固定，子元素高度也不固定 。
这种情况下上面列出的都不能使用，当遇到这种情况时确实很让人头疼，不知如何是好，那么使用css3的 box-align 和 box-pack 进行水平居中，使用align-items进行垂直居中。
这种情况下，无论父元素和子元素宽高如何变化，子元素都能够保持水平和垂直居中显示。唯一不足之处就是对于不支持CSS3的浏览器不能使用。
.parent{ ???width: 200px; ???height: 200px; ???background-color: #13B202; ???display: flex; ???display: -webkit-flex; ???-webkit-box-pack: center; ???justify-content: center; ???-webkit-box-align: center; ???-ms-flex-align: center; ???-webkit-align-items: center; ???align-items: center;}.child{ ???width: 40px; ???height: 40px; ???background-color: #000;}效果如下：
CSS布局-垂直居中问题
原文地址：http://www.cnblogs.com/hanguozhi/p/7472874.html