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

Answer 1

在这种情况下，最好放弃使用其他方法，而是使用表格，并使用vertical-align: middle。你可以只使用一个单行、单元格的表格而不感到太过内疚（我对此睡得很踏实）。虽然这并不是世界上最语义化的事情，但你更愿意维护一个小的单元格表格，还是计算出确切的高度并使用负边距进行绝对定位呢？

- Russell Leggett

---

你会如何处理表格的高度？默认情况下，表格单元格会尝试最小化整体高度。然而，将表格高度设置为100％可能会解决问题。 - Marc Audet

如果除了图像之外，您还有一个标题，并且希望图像-标题块垂直居中，则采用这种方法非常有用。 - Marc Audet

是的，这可能是迄今为止最好的想法。令人沮丧的是，没有简单的动态方法来做到这一点。有人知道为什么会对y轴进行这样的歧视吗？ - kxk

Answer 2

如果你知道要居中的元素的高度，你可以这样做：

img {
  display: block;
  height: 500px;
  position: absolute;
  top: 50%;
  margin-top: -250px; /* 50% of your actual height */
}

- scurker

---

谢谢尝试，但我想要一些动态的东西。 - kxk

Answer 3

我只知道一种方法：

#mydiv {
   position: fixed;
   top: 50%;
   left: 50%;
   width: 100px;
   height: 100px;
   margin-top: -50px;
   margin-left: -50px;
}

这是针对x和y轴的 - 但每个元素的宽度/高度和边距都必须更改。我讨厌它:-)

此外，如果元素大于浏览器窗口，您还会遇到问题。

- MacGucky

---

我仍然需要知道图像的大小才能使其工作。我正在寻找更具动态性的东西。 - kxk

是的，这是除了基于表格的方法之外所有解决方案的问题。您可以通过使用JavaScript（通过JavaScript获取宽度/高度并设置适当的CSS）来解决这个问题。 - MacGucky

Answer 4

最常用的方法是使用绝对定位。您将顶部位置设置为50％，然后设置元素高度的负一半作为上边距。

#main {
    position: relative;
}
#main img {
    position: absolute;
    top: 50%;
    margin-top: -(您的图像高度的一半)px;
}

- Alex

---

谢谢尝试，但我想要一些动态的东西。 - kxk

Answer 5

这里是使用 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

这可能不能解决楼主的问题，但在其他情境下可能会有用。

- Marc Audet

---

这种方法的一个缺点是，由于行高 hack 的存在，您无法将其用于多行文本。 - Marc Audet

Answer 6

尝试使用这个CSS：

margin-top:auto;
margin-bottom:auto;
display:block;

- Kevin Yao

Answer 7

在我的样式表中使用#menu img { vertical-align: middle; } 在最新版本的 FireFox、Opera、Safari 和 Chrome 中都能很好地工作，但是在 IE9 中不能。我必须手动添加 style="vertical-align: middle" 到每一行的 img 代码。例如：

<li><a href="../us-hosts.php">
    <img src="../images/us-button.png" width="30" height="30"
         alt="US Hosts" style="vertical-align: middle;"/>&nbsp; US Hosts</a>
</li>

- John Grafflin

Answer 8

答案有点过时，这里提供一个更现代的解决方案：

display: flex;
align-items: center;

- Maksiks