html - 如何居中显示：块/内联块

Question

当以 html 和 css 为中心时，我发现了两种方法 - 要么应用于元素：

display:block;
margin:0 auto;

或使用：

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

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

Answer 1

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

元素可以是内联的（意味着它们都彼此相邻 - 就像 span 标签），也可以是块状的（意味着堆叠在一起 - 像 div 标签）。

Margin: auto 虽然第一次看到它时有点奇怪，但它是使块级别（位置静态）元素居中的最佳且唯一的方法。

对于显示的任何内容：内联（如跨度标签） - 使其居中的唯一方法是在父级上指定 text-align: center 。这将使所有 display: inline 居中，即 position: static;

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

想象一个场景，其中每个导航项都有一个 80px 高的背景图像 - 你不能让内联元素的高度为 80 - 所以你必须让每个元素 display: block - 只有这样你才能给它一个高度。因此，要使它们都彼此相邻，您需要浮动它们。问题是如果你浮动它们，你不能让它们都在页面上居中，除非你给导航和边距一个固定的宽度：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

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

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