CSS：<div>元素内的中心元素
CSS：<div>元素内的中心元素
提问于 2011-07-25 05:59:57
要使一个HTML元素居中，我可以使用CSS left: 50%;。但是，这会使元素相对于整个窗口居中。
我有一个元素，它是一个<div>元素的子元素，我希望该子元素相对于这个父<div>居中，而不是整个窗口。
我不希望容器<div>的所有内容都居中，只有一个特定的子级。
回答 19
Stack Overflow用户
回答已采纳
发布于 2011-07-25 06:02:28
将text-align:center;设置为父div，将margin:auto;设置为子div。
#parent {
text-align:center;
background-color:blue;
height:400px;
width:600px;
}
.block {
height:100px;
width:200px;
text-align:left;
}
.center {
margin:auto;
background-color:green;
}
.left {
margin:auto auto auto 0;
background-color:red;
}
.right {
margin:auto 0 auto auto;
background-color:yellow;
}<div id="parent">
<div id="child1" class="block center">
a block to align center and with text aligned left
</div>
<div id="child2" class="block left">
a block to align left and with text aligned left
</div>
<div id="child3" class="block right">
a block to align right and with text aligned left
</div>
</div>
这是一个很好的资源，可以将所有东西集中在一起。
Stack Overflow用户
发布于 2011-07-25 06:01:46
父div上的text-align:center;应该可以做到这一点
Stack Overflow用户
发布于 2019-06-24 11:16:01
要仅使特定子项居中，请执行以下操作：
.parent {
height: 100px;
background-color: gray;
position: relative;
}
.child {
background-color: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 20px;
height:20px;
margin: auto;
}<div class="parent">
<span class="child">hi</span>
</div>
或者，您也可以使用flex，但这将使所有子项居中
.parent {
height: 100px;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
}
.child {
background-color: white;
}<div class="parent">
<span class="child">hi</span>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6810031
复制相关文章
相似问题
腾讯云开发者
