标签：其他 ems bsp 垂直居中 items 支持 居中 如何 css3
在前端页面的布局方面，很多时候需要用到垂直居中，如果父集元素或子元素的高度是固定的那么垂直居中可以用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; }
效果如下：
标签：其他 ems bsp 垂直居中 items 支持 居中 如何 css3
原文地址：http://www.cnblogs.com/hanguozhi/p/7472874.html
