垂直和水平居中任何内容答案

【问题标题】：Vertically AND horizontally center ANY content垂直和水平居中任何内容
【发布时间】：2012-09-23 11:12:44
【问题描述】：

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

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

【问题讨论】：

你不知道内部 div 的宽度/高度，意味着外部 div 没有固定宽度/高度。然后你可以使用外部容器元素填充。
最后，我用transform 属性解决了这个问题。对于弹出/浮动任何东西：jsfiddle.net/SydXr 对于内联、水平居中，我只知道一个：display: table; margin: 0 auto;

标签： css dynamic center

【解决方案1】：

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

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

http://jsfiddle.net/E9QF3/

【讨论】：

没有办法让容器居中吗？我记得有一次我在智能手机上发现了一个使用transform: translate(x,y) 的技巧，但不幸的是，我在 Google 上找不到了。

【解决方案2】：

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

【讨论】：

没办法，使用 calc() 或表达式......甚至更糟糕的 Javascript 来计算尺寸是一种非常糟糕的做法 - 它永远不会防弹，最后它的任务是 CSS 和浏览器呈现您的网站

【解决方案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%);
}

【讨论】：