CSS：将元素集中在 y 轴上的标准（动态）方式

Question

我的问题或多或少是不言自明的，我试图找到一种标准的动态方式来将元素集中在 y 轴上，就像：

 margin: auto;

对于 x 轴。有任何想法吗？

我说的是下面的一段代码，空白页面，将一张图片居中对齐。

 <div id="main" style="display: block;">
    <img style="margin: auto; display: block;"
    src="http://www.example.com/img.jpg" />
</div>

任何帮助将不胜感激！ :)

原文由 kxk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需放弃并在这个表上使用 vertical-align: middle 。你可以只用一个单行、单单元格的表格而不会感到太内疚（我睡得很熟）。这不是世界上最语义化的东西，但你更愿意维护什么，一个小小的单格表格，或者计算出确切的高度并以负边距进行绝对定位？

原文由 Russell Leggett 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是使用 vertical-align 的变体

http://jsfiddle.net/audetwebdesign/r46aS/

它有一个缺点，您需要为 line-height 指定一个值，该值还将定义行为类似于视口的包含元素的高度（蓝色轮廓）。

注意：您可以通过为 body 或 html 元素设置高度 (100%) 来解决窗口高度问题，但您需要尝试一下（请参阅第 3 个参考资料）。

然而，好处是您不必根据图像的尺寸做一些数学运算。

下面是一些与垂直对齐相关的参考资料：

http://css-tricks.com/what-is-vertical-align

http://blog.themeforest.net/tutorials/vertical-centering-with-css

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

有时我必须记住基础知识，所以我重读：

http://www.w3.org/TR/CSS21/visudet.html

这可能无法解决 OP 的问题，但在其他情况下可能会有用。

原文由 Marc Audet 发布，翻译遵循 CC BY-SA 2.5 许可协议