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

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

.centered {
    position: absolute;
    margin: auto;

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

如果父元素大于子元素，或具有相同的大小，则此选项有效：

但如果子对象较大，则其中心不会位于其父对象的中心。相反，它们的左边框将位于同一位置，并且子元素将仅扩展到右侧：

水平定心有问题

---

如果只使用CSS（而不使用CSS 2D/3D转换），而不添加新的容器元素，如何修复它？

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

我在这里更新了你的小提琴：

---

添加<代码>左侧：50%；转换：转换（-50%，0）并移除

右侧：0px

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

将下面的CSS添加到
.d2
将解决此问题

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

您可以查看演示
好的，我尝试了而没有2D CSS：

将
绝对
更改为
固定
并添加一些
边距：自动



body，html{
宽度：100%；
身高：100%；
}
身体{
位置：相对位置；
背景：绿色；
}
.居中{
位置：固定；
保证金：自动；
显示：块；
底部：0px；
左：0px；
顶部：0px；
右：0px；
}
.d1{
背景：黄色；
宽度：50px；
高度：50px；
}
.d2{
背景：红色；
不透明度：0.7；
宽度：250px；
高度：250px；
}
这是一个不使用CSS 2D/3D转换的解决方案。您可以在父元素上使用
display:flex
，在子元素上使用
display:table
（这是重要的）


body，
html{
宽度：100%；
身高：100%；
保证金：0；
}
身体{
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景：绿色；
}
.1.d1{
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
}
.d1{
背景：黄色；
宽度：50px；
高度：50px；
}
.d2{
背景：红色；
不透明度：0.7；
宽度：250px；
高度：250px；
显示：表格；
}
你就快到了。只需将绝对位置设置为相同的（大）负数，以便为
自动
边距留出足够的空间：

.centered {
    position: absolute;
    margin: auto;

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

在中：

要使子对象水平居中，请使用bootstrap-4类：

justify-content-center

 align-items-center

要使子对象垂直居中，请使用bootstrap-4类：

justify-content-center

 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中的translate（），但对于这个问题，它似乎是最好的解决方案，即使它是2D CSStransformation@Paulie_D是的，这很奇怪
：）
，另外
flex-direction:column
用于chrome，但在firefox上它与
row
一起使用。添加类
.d-flex。将资源中心对齐到容器中，使其水平居中。当孩子在x和y两个方向上都变大时，它们似乎不起作用。你救了我的命+1@IterAtor这就是我在第一句话中建议将位置从绝对改为固定的原因。