如何在div中垂直居中文本

Question

我尝试了大约6-7种不同的方法来垂直居中这个文本，因此它仍然保持响应并位于div的中心。

这是一个小提琴：http://jsfiddle.net/p2NLK/

我尝试使用

这样的定位

margin-top: 40%;

或

margin-top: 20em;

到h1元素将文本向下推，但它根本不流畅而且会破坏很多。

Answer 1

你试过吗

<div style="text-align: center;">

适用于水平中心。

尝试this垂直居中。

或

CSS

body, html, #wrapper {
width: 100%;
height: 100%
}

#wrapper {
display: table
}

#main {
display: table-cell;
vertical-align: middle;
text-align:center
}

HTML

<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>

希望这会有所帮助。 请留下反馈。

Answer 2

试试这个：

replace margin-top: 40%; to following css

display: table-cell;
vertical-align: middle;
text-align:center;