使用flexbox在div内居中div并使用绝对位置

Jose Ricardo Bustos M. 发表于 Dev

何塞·里卡多·布斯托斯M.

其他问题中心使用CSS，我希望将div置于其他div的绝对位置中心，我希望得到与此图像类似的结果：

最好使用flexbox，示例代码：

.abs_1 {
  position: absolute;
  background: red;
  height: 200px;
  width: 200px;
  top: 40px;
  left: 40px;
}

.abs_2 {
  position: absolute;
  background: blue;
  height: 200px;
  width: 200px;
  top: 60px;
  left: 250px;
}

.center{
    display: flex;
    justify-content: center;
    align-items: center;
}

.center div {
  background: black;
  color: white;
}

<div class="abs_1">
  <div class="center">
      <div>Hello.</div>
  </div>
</div>

<div class="abs_2">
  <div class="center">
      <div>World</div>
  </div>
</div>

我得到以下内容：

您可以使用flex CSS执行此操作吗？

迈克尔·本杰明

这是使用CSS Flexbox的解决方案。

的CSS

#container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.abs_1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    background: red;
    height: 200px;
    width: 200px;
}

.abs_2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    background: blue;
    height: 200px;
    width: 200px;
}

.center > div {
    background: black;
    color: white;
}

的HTML

<div id="container">

    <div class="abs_1">
        <div class="center">
            <div>Hello.</div>
        </div>
    </div>

    <div class="abs_2">
        <div class="center">
            <div>World</div>
        </div>
    </div>

</div><!-- end #container -->

演示：http : //jsfiddle.net/3ekyetc0/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。