出于某种原因，我的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>有时还有与它仅有一个街区格的行格。我究竟做错了什么？
要达到什么样的你正在尝试做的：
考虑使用的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 abality to provide width/height
}
具有width: 100%沿margin: 0 auto;是无用的，因为你元素将采取充分的空间。
float: left会浮动左侧的元素，直到没有剩余空间为止，因此他们将继续新行。使用display: inline-block能够内嵌显示元件，但以提供尺寸的能力（其中宽度/高度被忽略相比display: inline）
如果元素被显示在一行中（和IE6/7做无关紧要），请考虑使用display: table/table-cell而不是float。
使用inline-block导致元件之间，因此水平间隙需要采取零另一个的步骤，间隙（最简单的办法是设置为font-size: 0父元素，然后对具有display: inline-block子元素恢复font-size）。
另一个working example，使用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;
}
虽然不涉及这一问题（因为要对齐的<div> S中的容器内），但直接关系：如果你想对齐只是一个DIV水平，你可以这样做：
#MyDIV
{
display: table;
margin: 0 auto;
}
我试图接受的答案，但最终发现：
margin: 0 auto;
width: anything less than 100%;
到目前为止效果很好。
当我需要处理水平div对齐时，我使用了这两种方法。
第一（Center Aligning Using the margin Property）：
.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;
}
使用第二种方法是方便的，当你有几个要素，你想他们都在一个表格单元格为中心（即在一个小区几个按钮）。
CSS中的对齐是一场噩梦。幸运的是，W3C在2009年推出了一个新标准：Flexible Box。有一个关于它的好教程here。就我个人而言，我发现它比其他方法更合乎逻辑，更易于理解。
.row {
width: 100%;
display: flex;
flex-direction: row;
}
.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网格。但是，仍然有1％的浏览器不支持Flex。但谁真正关心老IE用户无论如何;）
小提琴：Check Here
谢谢，它的工作！这是一个很好的答案）） – informatik01 2014-05-23 07:17:18