html – 如何使CSS中的子元素居中,即使它大于父对象？

发布时间：2020-12-14 22:24:36 所属栏目：资源来源：网络整理

导读：我想创建一个css类，所以div可以放在它的父中心。我使用的代码是： .centered { position: absolute; margin: auto; bottom: 0px; left: 0px; top: 0px; right: 0px;} 如果父级大于子元素，或者具有相同的大小，它将起作用： https://jsfiddle.net/cy8dn1km/

我想创建一个css类，所以div可以放在它的父中心。我使用的代码是：

.centered {
    position: absolute;
    margin: auto;

    bottom: 0px;
    left: 0px;
    top: 0px;
    right: 0px;
}

如果父级大于子元素，或者具有相同的大小，它将起作用：
https://jsfiddle.net/cy8dn1km/

但是，如果孩子较大，则其中心位于其父母的中心位置。相反，他们的左边界将在同一个地方，而且子元素将被扩展到右边：

https://jsfiddle.net/797L7nce/

水平居中点出错

如何才能使用CSS来修复(不使用CSS 2D / 3D转换)，而不添加新的容器元素？

解决方法

这里是不使用CSS 2D / 3D转换的解决方案。您可以在父元素上使用display：flex与flex-direction：column(这很重要)，并在子元素上显示：table。

body,html {
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: green;
}
.centered.d1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.d1 {
  background: yellow;
  width: 50px;
  height: 50px;
}
.d2 {
  background: red;
  opacity: 0.7;
  width: 250px;
  height: 250px;
  display: table;
}

<div class="centered d1">
  <div class="centered d2"></div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!