如何在div中垂直居中H1？

Question

首先,我道歉.我知道这里有针对这个问题的各种解决方案,但对于我的生活,我无法让他们中的任何一个工作.

对于一个响应式网站,我试图将一个h1集中在一个div中.

水平居中不是问题,但我在垂直居中时遇到了问题.据推测,我做错了什么或误解了我在这里找到的解释(或两者兼而有之).

因为我可能会以错误的方式解释早期的解决方案,有人可以解释一下我必须添加到下面的代码中以使h1垂直居中吗？

(为了使这个问题与尽可能多的人相关,我已经删除了我以前所有尝试这样做的代码.)

CSS:

html, body {
height: 100%;
margin: 0;
}

#section1 {
min-height: 90%; 
text-align:center
}

HTML:

<div class="section" id="section1">
<h1>Lorem ipsum</h1>
</div> 

Answer 1

你可以实现垂直对齐display:table-cell:

#section1 {
    height: 90%; 
    text-align:center; 
    display:table;
    width:100%;
}

#section1 h1 {display:table-cell; vertical-align:middle}

例

更新 - CSS3

对于垂直对齐的替代方法,您可以使用以下css 3,在所有最新的浏览器中都应该支持:

#section1 {
    height: 90%; 
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}

更新了小提琴

Answer 2

您可以使用display属性来实现此目的：

html, body {
    height:100%;
    margin:0;
    padding:0;
}
#section1 {
    width:100%; /*full width*/
    min-height:90%;
    text-align:center;
    display:table; /*acts like a table*/
}
h1{
    margin:0;
    padding:0;
    vertical-align:middle; /*middle centred*/
    display:table-cell; /*acts like a table cell*/
}

演示：http：//jsfiddle.net/a3Kns/