首先，请原谅我的无知，我已经将近 14 年没有玩过 HTML，我正在努力让自己熟悉新标准和修订版。我有一个目前正在试验的布局，我的容器 block 元素似乎没有绝对水平居中。不幸的是，我不知道为什么会发生这种情况，我希望你们中的任何一个人能够找出问题所在，或者解释为什么会发生这种行为。
谢谢!
HTML
<!DOCTYPE HTML>
<div class="container">
<div id="contentMain">
<div class="titleBar">
<p>Main Content Title Element @ 960px</p>
</div>
<div class="containerContent">
<p>Main Content Area Element</p>
</div>
</div>
</div>
CSS
.container {
margin-left:auto;
margin-right:auto;
background-color:#F00;
min-width:996px;
width:2px;
}
.containerContent {
padding:4px;
}
.titleBar {
padding:4px;
}
#contentMain {
margin-top:2px;
margin-bottom:4px;
margin-left:4px;
margin-right:4px;
border:1px dashed #000;
background-color:#FFF;
float:left;
width:960px;
height:200px;
clear:both;
}
p {
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-variant:normal;
font-weight:normal;
}
最佳答案
要使子 div 居中，您可以使用 display: inline-block 和 text-align: center
给父 div text-align: center 和子 div display: inline-block。
HTML
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
CSS
.container{
float: left;
width: 100%;
border: 1px solid blue;
text-align: center;
}
.block{
width: 30%;
display: inline-block;
height: 300px;
border: 1px solid red;
}
关于html - 居中的 <div> 并不完全居中，为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21955472/