我想创建一个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>
