如何纵向和横向中心段与其他标准？

Question

所以我一直在我的第一个网站上工作，而且我很开心。

但是，我发现很难在一个div的容器内垂直和水平地实现一个段落（跨越一行）的居中。

div具有比例宽度（96％），并且不按像素设置。此外，该段落有一定量的填充（例如：20px顶部和底部）。

在这种情况下，是否有垂直和水平居中的技巧？

非常感谢！

Answer 1

看到这个小提琴 - http://jsfiddle.net/zv2Pu/1/

我在p容器中水平和垂直居中div。

希望这有帮助！

Answer 2

来自你的2个例子：

一个大小的盒子里面的一个容器：

你可以使用伪到垂直对齐的伪和内部的盒子放在一起     的 DEMO

.holder {
    width: 96%;
    height: 400px;
    border: 1px solid black;
    text-align:center;
}
.holder:before {
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.holder p {
    display:inline-block;
    vertical-align:middle;
    width: 70%;
    margin: 20% auto;
    text-align:left;
}

一个大小的盒子里面的一个或几个盒子：

您可以使用display:table-cell; DEMO

.holder {
    width: 96%;
    height: 400px;
    border: 1px solid black;
    display:table-cell;/* it will expand if content grows oversized */
    vertical-align:middle;
}
.holder p {
    width: 70%;
    margin: 10px auto;
}
.holder div {
    width: 70%;
    margin: 10px auto;
}

Answer 3

你可以简单地使用text-align：center;在你的div。