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

Question

当在html和css中居中时，我发现了两种方法--或者应用于元素：

display:block;
margin:0 auto;

或者使用：

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

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

Answer 1

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

元素可以是内联的(意味着它们都是相邻的-就像span标签一样)，也可以是块的(意味着堆栈堆叠在一起-就像div标签一样)。

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

对于任何display: inline (像span标记)-唯一居中的方法是在父对象上指定text-align: center。这将使所有内容显示居中:内联在其中，即position: static；

Display: inline-block是两者的混合体，它相对较新(但如果您使用另一个答案中提到的技巧，则最早支持ie7 )。使用inline- block，你可以获得inline的好处，因为你可以把一堆东西放在一起，让它们都居中(想一想所有导航项目都居中的导航)，但也让每个项目利用你通过display: block获得的一些东西:block-最重要的是高度。

想象一下这样一个场景，每个导航项目都有一个80px高的背景图像--你不能让一个内联元素的高度是80 --所以你必须让每个元素显示: block --只有这样你才能给它一个高度。因此，为了使它们都出现在彼此相邻的位置，您可以将它们浮动。问题是，如果你浮动它们，你不能让它们在页面上全部居中，除非你给了导航和边距一个固定的宽度: auto THAT。这意味着导航有一个固定的宽度-可能是可以的，但有时导航必须有动态元素，不同语言的不同宽度，等等。

输入display: inline-block。

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

在这种情况下，没有更好的方法，两种方法都可以工作，并且都得到了纠正。只显示一件事:内联块不能在IE7上工作(如果你支持这个浏览器)，你需要修改一下才能让它工作

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