Question

我想将一个div元素居中，其父元素的位置值为absolute。我想让它在垂直和水平方向都居中。

我该怎么做？

＆＃13;

<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>

＆＃13;

所以centered_div应该在parent_div

中居中

Answer 1

您可以将父级的位置设置为相对位置。然后将子项的top，right，bottom和left属性设置为0，并将margin设置为auto。

＆＃13;

.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;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>

＆＃13;

修改

如前所述，使用自上边距设置为0的top，right，bottom和left属性仅在子元素具有设置的宽度和高度时才有效。否则，孩子将简单地填充父母的整个宽度和高度。如果您想让孩子居中而不专门设置它的宽度和高度，您可以使用CSS translate()功能来完成。

首先，您可以通过将孩子的上边和左边设置为父母宽度和身高的50％来使孩子的左上角居中。然后将其上下移动50％的宽度和高度。

＆＃13;

.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;
}

＆＃13;

<div class="parent">
  <div class="child">
    <p>Lorem ipsum dolor.</p>
  </div>
</div>

＆＃13;

将一个abolute poseitioned元素置于其父元素中

1 个答案:

修改