如何水平对齐div？

由于某些原因，我的div不会在包含div的水平居中：

.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

有时有一个行div，其中只有一个块div。我究竟做错了什么？

要实现您想要做的事情：

考虑使用display: inline-block代替float。

试试这个：

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with ability to provide width/height
}​

演示

• 其margin: 0 auto;沿width: 100%是无用的，因为你元素将采取充分的空间。

• float: left会将元素向左浮动，直到没有空间，因此它们将换行。用于display: inline-block能够内联显示元素，但具有提供尺寸的能力（与display: inline忽略宽度/高度的位置相反）

CSS对齐一直是一场噩梦。幸运的是，W3C在2009年引入了新标准：Flexible Box。有关于它的一个很好的教程在这里。我个人觉得它比其他方法更合乎逻辑且更易于理解。

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.block {
  width: 100px;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

使用FlexBox：

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

.row {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* for centering 3 blocks in the center */
  /* justify-content: space-between; for space in between */ 
}
.block {
  width: 100px;
}

最新趋势是使用Flex或CSS Grid而不是Float。但是，仍然有1％的浏览器不支持Flex。但是谁仍然真正在乎老IE用户呢；）

小提琴：在这里检查

另一个工作示例，使用display: inline-block和text-align: center

HTML：

<div class='container'>
    <div class='row'>
        <div class='btn'>Hello</div>
        <div class='btn'>World</div>
    </div>
    <div class='clear'></div>
</div>

CSS：

.container {
    ...
}
.row {
    text-align: center;
}
.btn {
    display: inline-block;
    margin-right: 6px;
    background-color: #EEE;
}
.clear {
    clear: both;
}

小提琴：http：//jsfiddle.net/fNvgS/

尽管未涵盖此问题（因为您想<div>在容器内对齐s）但直接相关：如果只想水平对齐一个div，您可以这样做：

#MyDIV
{
    display: table;
    margin: 0 auto;
}

如果要在一行中显示元素，而IE 6/7没关系，请考虑使用display: table和display: table-cell代替float。

inline-block导致元素之间的水平间隙，并且需要将该间隙归零。最简单的方法是设置font-size: 0父元素，然后通过将font-size子元素display: inline-block设置font-size为a px或remvalue 来恢复子元素。

我尝试了接受的答案，但最终发现：

margin: 0 auto;
width: anything less than 100%;

到目前为止效果很好。

当我需要处理水平div对齐时，我已经使用了这两种方法。
首先（使用margin属性进行居中对齐）：

.center-horizontal-align {
    margin-left: auto;
    margin-right: auto;
    width: (less than 100%) or in px
}

将左，右页边距设置为自动指定它们应平均分割可用页边距。如果宽度为100％，则中心对齐无效。

第二个：

.center-horizontal-align {
    display: table
    margin-left: auto;
    margin-right: auto;
}

当您有多个元素并且希望所有元素都集中在一个表单元格中（即，一个单元格中有多个按钮）时，使用第二种方法很方便。