css - 垂直和水平居中任何内容

Question

所以，假设我有一个容器，它可能包含也可能不包含任何其他元素，并且具有动态内容，即从数据库生成的文本，所以我们不确定它的宽度/高度。

一个人如何能够将这些动态元素水平和垂直居中？

Answer 1

有一个黑客，是的。将您的容器设置为display: table;，然后在文本上（例如在 ap 中）将其设置为display: table-cell; vertical-align: middle;. 这将垂直对齐它。

您可以将其与text-align和padding水平居中。

http://jsfiddle.net/E9QF3/

Answer 2

我能想到的最好方法是使用 JavaScript 动态计算加载、调整大小甚至 Ajax 事件时的高度。看看这个 ALA 示例的来源。

Answer 3

#center_of_viewport {
    position: fixed; /* absolute also works */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}