Question

我想创建一个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转换），而无需添加新的容器元素？

Answer 1

添加left: 50%; transform: translate(-50%, 0);并移除right: 0px;

.centered {
    position: absolute;
    margin: auto;
    display: block;
    bottom: 0px;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
}

Demo

Answer 2

这是一个不使用CSS 2D / 3D转换的解决方案。您可以在父元素上使用display: flex flex-direction: column（这是重要），在子元素上使用display: 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>

Answer 3

好的，我尝试了没有2D CSS ：

将absolute更改为fixed并添加一些margin: auto;

JSfiddle here

body, html {
    width: 100%;
    height: 100%;
}

body {
    position: relative;
    background: green;
}

.centered {
    position: fixed;
    margin: auto;
    display: block;
    bottom: 0px;
    left: 0px;
    top: 0px;
    right: 0px;
}

.d1 {
    background: yellow;
    width: 50px;
    height: 50px;
}

.d2 {
    background: red;
    opacity: 0.7;
    width: 250px;
    height: 250px;
}

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

Answer 4

如果您知道元素的尺寸，您可以使用50％的左/上位置，负边距为元素大小的一半。

我在这里更新了你的小提琴：https://jsfiddle.net/797L7nce/2/

.centered {
    position: absolute;
    display: block;
    left:50%;
    top:50%;

}

.d1 {
    background: yellow;
    width: 50px;
    height: 50px;
    margin-left:-25px;
    margin-top:-25px;
}

.d2 {
    background: red;
    opacity: 0.7;
    width: 250px;
    height: 250px;
    margin-left:-125px;
    margin-top:-125px;
}

Answer 5

你快到了。只需将绝对位置设置为相同（大）负数，即可为auto边距留出足够的空间：

.centered {
    position: absolute;
    margin: auto;

    bottom: -9999px;
    left: -9999px;
    top: -9999px;
    right: -9999px;
}

https://jsfiddle.net/797L7nce/9/

Answer 6

将以下 CSS 添加到.d2将解决此问题。

.d2 {
    background: red;
    opacity: 0.7;
    width: 250px;
    height: 250px;
    position:absolute;
    left:50%;
    margin-left:-125px;
}

您可以查看演示 here

Answer 7

在 Bootstrap 4 ：

将孩子水平居中 ，请使用bootstrap-4课程：

justify-content-center

垂直居中 ，使用bootstrap-4类：

 align-items-center

但请记住，不要忘记使用 d-flex 类它是一个bootstrap-4实用程序类，就像这样

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <span class="bg-primary">MIDDLE</span>    
</div>

注意：如果此代码不起作用，请务必添加bootstrap-4实用程序

我知道这不是这个问题的直接答案，但它可能有助于某人

如何将CSS中的子元素居中，即使它大于父元素？

7 个答案: