垂直和水平居中任何内容

所以，假设我有一个容器，它可能包含或可能不包含任何其他元素，并具有动态内容，即从数据库生成的文本，因此我们不确定如何宽/高是真的吗。垂直和水平居中任何内容

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

2012-10-02 user1263513

你不知道内部div的宽度/高度，意思是外部div没有固定的宽度/高度。然后你可以使用外部容器元素的填充。 – Dev

最后，我想出了'transform'属性。对于弹出/浮动任何东西：http://jsfiddle.net/SydXr/对于内联，水平居中我只知道一个：'display：table; margin：0 auto;' – user1263513

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

来源

2017-05-19 13:44:04 user1263513

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

您可以text-align和padding结合这个水平居中。

http://jsfiddle.net/E9QF3/

来源

2012-10-02 15:19:10 LeonardChallis

有没有办法让容器居中？我记得有一次，我发现我的智能手机使用'transform：translate（x，y）'的一个技巧，但不幸的是我无法再用Google找到它。 – user1263513

我已经用可能的方式更新了答案 – LeonardChallis

我能想到的最好的办法包括JavaScript来dinamically计算负载的高度，对调整大小，甚至Ajax的事件。看看this ALA example.的来源

来源

2012-10-02 17:07:02 BeetleTheNeato

没有办法，使用calc（）或表达式......或甚至更差的Javascript来计算维度是一个非常糟糕的做法 - 它从来没有防弹和最终它的CSS任务和浏览器呈现您的网站 – redaxmedia

垂直和水平居中任何内容

回答

相关问题