要居中一个HTML元素，我可以使用CSS左:50%;。但是，这使得元素相对于整个窗口居中。
我有一个元素，它是<div>元素的子元素，我想让子元素以<div>这个父元素居中，而不是整个窗口。
我不希望容器<div>的所有内容居中，只是一个特定的子。
当前回答
如果你想在div中居中，不关心除法大小，你可以使用Flex功能。我更喜欢使用flex，不使用元素的精确大小。
<div class="outer flex">
<div class="inner">
This is the inner Content
</div>
</div>
如你所见，Outer div是Flex容器，Inner必须是Flex项目，指定Flex: 1 1 auto;为了更好地理解，您可以看看这个简单的示例。http://jsfiddle.net/QMaster/hC223/
希望这对你有所帮助。
其他回答
指定text-align: center;到父对象并显示:inline-block;到div。
有很多方法可以让元素居中，可以使用显示属性，位置，浮动，边距。但通常我更喜欢使用flexbox，因为它简单易用。我知道不同的人有不同的偏好，但这完全取决于开发人员的偏好和元素之间的关系。
.parent { 显示:块; ｝ .sub-parent-1 { 显示:flex; justify-content:中心;/ /水平居中 对齐项目:中心;/ /垂直定心 ｝ 身体< > < div class = "父" > < div class = " sub-parent-1”> < div class = " child-1 " >…< / div > < / div > < div class = " child-2 " >…< / div > < div class = " child-3 " >…< / div > < div class = " child-4 " >…< / div > < div class = " child-5 " >…< / div > < / div > 身体< / >
div是固定宽度还是流体宽度?无论哪种方式，对于流体宽度，您可以使用:
#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}
或者你可以设置父div为text-align:center;子div的text-align:left;。
和左:50%;当div设置为position:absolute时，只根据整个页面居中。如果你将div设置为左侧:50%;它应该相对于父div的宽度。对于固定宽度，这样做:
#parent {
width:500px;
}
#child {
left:50%;
margin-left:-100px;
width:200px;
}
CSS
body{
text-align:center;
}
.divWrapper{
width:960px //Change it the to width of the parent you want
margin: 0 auto;
text-align:left;
}
HTML
<div class="divWrapper">Tada!!</div>
这应该使div居中
2016年HTML5 + CSS3方法
CSS
div#relative{
position:relative;
}
div#thisDiv{
position:absolute;
left:50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
HTML
<div id="relative">
<div id="thisDiv">Bla bla bla</div>
</div>
Fiddledlidle
https://jsfiddle.net/1z7m83dx/
我相信现代的方法是在父容器中放置位置-项目:居中
一个例子可以在这里找到:https://1linelayouts.glitch.me
