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

Question

在 html 和 css 中居中时，我找到了两种方法 - 要么应用于元素：

display:block;
margin:0 auto;

或使用：

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

我总是想知道哪个更好，为什么。 谢谢！！

Answer 1

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

元素可以是内联的（意味着它们都彼此相邻——就像一个跨度标签），或者它们可以是块（意味着堆叠在彼此之上——就像一个 div 标签）。

边距：自动，虽然当你第一次看到它时有点奇怪，但它是将块级（位置静态）、元素居中的最好也是唯一的方法。

对于 display: inline (如 span 标签) - 居中的唯一方法是，如果您在父项上指定 text-align: center 。 这将使所有内容居中显示：内嵌在其中的位置：静态；

Display: inline-block 是两者的混合体，它相对较新（但如果您使用另一个答案中提到的 hack，则可以追溯到 ie7）。 使用内联块，您可以获得内联的好处，因为您可以将一堆东西放在一起并让它们都居中（想想所有导航项目都居中的导航），但也有每个item 利用 display: block 获得的一些东西 - 最重要的一个是 HEIGHT。

想象一个场景，每个导航项都有一个 80 像素高的背景图像——你不能让内联元素的高度为 80——所以你必须让每个元素显示：块——只有这样你才能给它一个高度。 所以为了让它们彼此相邻，你需要浮动它们。 问题是如果你浮动它们，你不能让它们都在页面上居中，除非你给导航和边距一个固定的宽度：auto THAT。 这意味着导航具有固定的宽度 - 可能没问题，但有时导航必须具有动态元素，不同语言的不同宽度等。

输入显示：内联块。

Answer 2

块元素应始终使用居中

.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;
}

Answer 3

在这种情况下没有更好的方法，这两种方法都有效，并且都得到了纠正。 只有一件事 display:inline-block 在 IE7 上不起作用（如果你支持这个浏览器）你需要一个黑客才能让它工作

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