要居中一个HTML元素，我可以使用CSS左:50%;。但是，这使得元素相对于整个窗口居中。
我有一个元素，它是<div>元素的子元素，我想让子元素以<div>这个父元素居中，而不是整个窗口。
我不希望容器<div>的所有内容居中，只是一个特定的子。
当前回答
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/
其他回答
如果你想使用CSS3:
position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);
您可能需要做进一步的搜索，以弄清楚如何使百分比适合元素的宽度。
为您的元素创建一个新的div元素居中，然后添加一个类专门为该元素居中，如下所示
<div id="myNewElement">
<div class="centered">
<input type="button" value="My Centered Button"/>
</div>
</div>
Css
.centered{
text-align:center;
}
你可以像这样使用bootstrap flex类名:
<div class="d-flex justify-content-center">
// the elements you want to center
</div>
即使里面有很多元素也可以。
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/
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;
}
