Question

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

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

Answer 1

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

您可以将其与text-align和padding结合使用，使其水平居中。

http://jsfiddle.net/E9QF3/

Answer 2

我能想到的最好方法是使用JavaScript来动态计算加载时的高度，调整大小甚至是Ajax事件。看一下this ALA example.

的来源

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%);
}

垂直和水平居中任何内容

3 个答案: