在另一个div中垂直和水平居中一个div

Question

我是一个有用的助手，可以为您翻译文本。

我正在尝试将一个 div 居中放置在另一个 div 中。

我已经尝试了以下 HTML 和 CSS：

HTML

<div class="header">
 <div class="homeImageText">
    <h1>Document Preparation Like Never Before</h1>
    </div><!--homeImagetext end-->
</div>

CSS

.homeImageText {
left:0; right:0;
top:0; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
}

header{
background: url(../images/header1.png) center center no-repeat; ;
height: 600px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

现场演示 JSFiddle代码示例

- hello

---

将 position: absolute 添加到 .homeImageText，并将 position: relative 添加到 header。 - Mathias

@Mathias，那并没有解决我的问题。 - hello

请注意，这并不使 div 自身居中，而是使其与父元素大小相同。 - SW4

可能是如何使用CSS垂直居中一个Div的最佳方法的重复问题。 - strah

这个怎么样？（http://jsfiddle.net/peteng/sa3Mk/3/） - Pete

Answer 1

演示 Fiddle

要实现垂直居中，将包装的 div 设置为 display:table，其子元素设置为 display:table-cell 并使用 vertical-align:middle 属性。水平居中可以使用 text-align:center; 轻松实现。

尝试以下 CSS：

.header {
    height: 600px;
    display:table;
    width:100%;
}
.homeImageText {
    height:100%;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

- SW4