如何居中显示 - display:block/inline-block

Question

当在html和css中居中元素时，我发现有两种方法 - 一种是在元素上应用：

display:block;
margin:0 auto;

或者使用：

display:inline-block;
text-align:center; (on the parent element)

我一直在想哪个更好，以及为什么。谢谢！！

- user2335065

Answer 1

块级元素应始终使用居中对齐

.block {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
}

根据W3C的说法：http://www.w3.org/Style/Examples/007/center.en.html#block

text-align: center;

这个名称很恰当：用它来居中文本。

更新

现在也可以使用display:flex：

.parent {
    display: flex;
    justify-content: center;
}
.block {
    width: 200px;
}

- evuez

---

text-align命名不太恰当，应该改为inline-align。 - Lawrence Dol

text-align 应该是唯一被接受的答案（同样适用于除文本以外的任何内容）。 - lmasneri

Answer 2

这是一个经典且重要的问题。

元素可以是行内的（意味着它们都挨在一起，例如span标签），也可以是块状的（意味着它们堆叠在一起，例如div标签）。

Margin: auto，虽然你刚开始看到时可能会觉得有点奇怪，但这是居中定位为static的块级元素的最佳且唯一的方式。

对于任何display:inline的东西（例如span标签），唯一能够使其居中的方法就是在其父元素上指定text-align:center。这会将里面所有display:inline且position:static的内容都居中；

Display:inline-block是两者的混合体，相对较新（但只要使用另一个答案中提到的hack，即使在ie7中也能支持）。使用inline-block，您可以获得inline的优点，例如您可以将一堆事物堆叠在一起并使它们全部居中（想象一个导航栏，其中所有导航项都居中），但同时具有每个元素都利用display:block所得到的一些东西中最重要的一点——高度。

想象一种情况，每个导航项都有一个高度为80像素的背景图像——您无法使行内元素具有80的高度——因此您必须使每个元素呈现为display:block ——只有这样，您才能给它一个高度。因此，要使它们全部出现在一起，您必须将它们浮动。问题是如果您将它们浮动，除非您为导航栏指定固定宽度并margin:auto THAT，否则无法使它们全部在页面上居中。这意味着导航栏具有固定宽度——这可能还好，但有时导航栏必须具有动态元素，不同的语言有不同的宽度等。

那么就引入了display:inline-block。

- gcoladarci

---

将此标记为答案显示：inline-block。 - Kajal Sinha

Answer 3

在这种情况下，两种方法都可行且都是正确的。只有一点需要注意，display:inline-block在IE7上无法工作（如果您支持该浏览器），您需要一个hack来使其正常工作。

display: inline-block;
*display: inline;
zoom: 1;

- Vinícius Moraes