如何让重叠的 DIV 子元素在父 DIV 中水平或垂直居中？

如何让 div 内的两个重叠 div 水平或垂直居中？

在一个 div 中，存在两个子元素，也是 div。小 div 放置于大 div 内，并且需要它们重合。同时，这两个 div 需要相对于其父 div 进行水平或垂直居中。且此设置不能影响父 div 的外观，也不能让子 div 超出父 div 的边界。

要实现此目的，可以使用 css 以下代码：

html：

<div class="box">
  <div class="inner1"></div>
  <div class="inner2"></div>
</div>

css：

.box {
  width: 500px;
  height: 500px;
  border: 5px solid red;
  margin: 100px auto;
  position: relative;
}

.inner1,
.inner2 {
  width: 200px;
  height: 200px;
  background: blue;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.inner1 {
  width: 400px;
  height: 400px;
  background: yellow;
}

以上就是如何让重叠的 DIV 子元素在父 DIV 中水平或垂直居中？的详细内容，更多请关注其它相关文章！