我想将一个 div 元素居中，该元素在其父元素内具有绝对位置值。我想让它垂直和水平居中。
我该怎么做？
<div class="parent_div">
<div class="centered_div">
<p>text</p>
<p>text</p>
</div>
<a href=""><img src="img" alt="image"></a>
<p>text</p>
<p>text</p>
</div>所以 center_div 应该在 parent_div 中居中
您可以通过将父母的位置设置为相对来做到这一点。然后将孩子的顶部、右侧、底部和左侧属性设置为 0，并将边距设置为自动。
.parent {
width: 300px;
height: 300px;
border: 1px solid #ddd;
position: relative;
}
.child {
width: 100px;
height: 100px;
background: #ddd;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}<div class="parent">
<div class="child"></div>
</div>如前所述，使用 top、right、bottom 和 left 属性设置为 0 和自动边距仅在子元素具有设置的宽度和高度时才有效。否则，子项将简单地填充父项的整个宽度和高度。如果你想在没有特别设置宽度和高度的情况下居中一个孩子，你可以使用 CSS translate()函数来完成。
首先，您可以通过将子项的顶部和左侧设置为其父项宽度和高度的 50% 来将子项的左上角居中。然后将其上下移动其自身宽度和高度的 50%。
.parent {
width: 400px;
height: 300px;
border: 1px solid #ddd;
position: relative;
}
.child {
padding: 20px;
background: #ddd;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
}<div class="parent">
<div class="child">
<p>Lorem ipsum dolor.</p>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句