如何在不使用JavaScript的情况下将div元素垂直和水平居中对齐

Question

我正在尝试使用CSS将一个div元素垂直和水平居中。

我看到的所有例子都使用像素值这样的硬编码值。

是否可能仅使用百分比值而不使用JavaScript来居中一个div元素呢？

这是我的测试：jsfiddle.net

- Lorraine Bernard

---

我在你的代码中没有看到硬编码的值...!! - Saurabh Kumar

@Saurabh 你是对的，但正如你所看到的，它无法正常工作，因为该 div 不是完美地水平居中。 - Lorraine Bernard

使用 text-align 而不是 left。http://jsfiddle.net/2RdeH/3/ - Saurabh Kumar

@Saurabh，感谢您的建议，但我希望将div内的文本左对齐。 - Lorraine Bernard

Answer 1

您需要知道div的大小。(是的，div必须有一个固定的大小)。

div { 
    width: 50px; 
    height: 50px; 
} 

他的 div 必须具有绝对定位：

div { 
    position: absolute; 
    width: 50px; 
    height: 50px; 
} 

在此之后，你必须将顶部和左侧设为50％。

div { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 50px; 
    height: 50px; 
} 

最后，您必须为div的高度和宽度的一半分别添加负边距，分别对应顶部和左侧。请保留HTML标签。

div { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 50px; 
    height: 50px; 
    margin:-25px 0 0 -25px; 
} 

请测试。
如有任何问题，请告知。

- Patrick Maciel

---

+1 感谢您的回答。对于垂直对齐，我不需要知道 div 的大小。话虽如此，我想水平对齐应该也是一样的。 - antonjs

Answer 2

这实际上可以通过使用:before选择器来完成（浏览器兼容性有待商榷，但是它确实可以完成）。

请查看Chris Coyier关于此主题的精彩文章，他还提供了一个jsfiddle链接供您尝试。

- aivou

---

无论如何，在您发布的示例中，您需要知道居中的div的宽度，否则它将无法正常工作。 - Lorraine Bernard

这并不是真的，实际上它并不依赖于任何定义的宽度。尝试将.centered的宽度参数设置为自动或完全没有，你会惊讶于这个CSS代码的适应性有多好。但正如前面所说的那样，无论如何这都不是一个可行的解决方案，因为它在浏览器中得到的支持并不完全。 - aivou

亲爱的@aivou，如果您确定它不依赖于任何定义的宽度或高度，请发布一个jsfillde链接。正如您所看到的http://jsfiddle.net/chriscoyier/hJtpF/在html部分中硬编码了高度！ style="height: 300px;" 尝试删除此部分并查看会发生什么。 - js999

嘿@js999，我稍微修改了jsfiddle以展示这个。请注意，在此示例中，由于父元素没有设置高度，它将仅（但请注意，仅仅是视觉上）水平对齐自己。显然，它不能对齐任何外部祖先 - 那将是荒谬的 - 因此你必须将其放置在具有高度的父元素内（不一定是硬编码数字;可以是百分比、继承或其他），以便在其中心视觉上对齐自己。链接：http://jsfiddle.net/Ak7Uq/1/ - aivou

@aivou，你的最后一个例子看起来更好，谢谢。但是，如果我在块中使用像素单位的高度，它可以工作；如果我使用百分比单位的高度，则无法工作。 - Lorraine Bernard