在另一个div中垂直居中一个div

# outerDiv { 宽度:500 px; 身高:500 px; 位置:相对; background - color: lightgrey; ｝ # innerDiv { 宽度:284 px; 身高:290 px; 位置:绝对的; 上图:50%; 左:50%; 转换:翻译(-50%，-50%); -ms-transform: -50%， -50%;/*即9 */ -webkit-transform (-50%， -50%);/* Chrome, Safari, Opera */ 背景颜色:灰色; ｝ < div id = " outerDiv " > < div id = " innerDiv " > < / div > < / div >

我个人更喜欢使用隐藏的伪元素来跨越外部容器的整个高度，并将其与其他内容垂直对齐。 Chris coyer有一篇关于这项技术的好文章。http://css-tricks.com/centering-in-the-unknown/ 这样做的巨大优势是可伸缩性。你不必知道内容的高度，也不必担心它的增长/缩小。此解决方案可伸缩:)。

这里有一个你需要的所有CSS和一个工作示例。 http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}

这对我很有用。可以定义外部div的宽度和高度。

代码如下:

.outer { 位置:相对; text-align:中心; 宽度:100%; 身高:150 px;//允许任何高度，也在%中。 背景:灰色; ｝ .outer > div:first-child { 位置:绝对的; 上图:50%; 左:50%; 宽度:100%; -webkit-transform (-50%， -50%); -ms-transform: -50%， -50%; 转换:翻译(-50%，-50%); 背景:红色; ｝ < div class = "外" > < div class = "内部" > 把你的文本或div内容放在这里! < / div > < / div >

另一种方法是使用转换转换

外部Div必须将其位置设置为相对或固定，内部Div必须将其位置设置为绝对，顶部和左侧为50%，并应用transform: translate(-50%， -50%)。

div.cn { 位置:相对; 宽度:200 px; 身高:200 px; 背景:灰色; text-align:中心; ｝ div.inner { 位置:绝对的; 上图:50%; 左:50%; 宽度:100 px; 身高:100 px; -webkit-transform (-50%， -50%); 转换:翻译(-50%，-50%); 背景:红色; ｝ < div class = " cn”> < div class = "内部" > 测验 < / div > < / div >

测试:

Opera 24.0(最低12.1) Safari 5.1.7(最少4个带-webkit-前缀) Firefox 31.0(最低3.6带-moz前缀，最低16不带前缀) Chrome 36(最少11个带-webkit前缀，最少36个不带前缀) IE 11, 10(最小9个带-ms前缀，最小10个不带前缀) 更多浏览器，我可以使用吗?

对于innerdiv没有指定它的高度值，没有纯CSS解决方案使它垂直居中。javascript的解决方案可以得到innerdiv的offsetHeight，然后计算style.marginTop。

另一种实现水平和垂直居中的方法是:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

(参考)