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

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

总结

以上是内存溢出为你收集整理的html – 如何使CSS中的子元素居中,即使它大于父对象？全部内容，希望文章能够帮你解决html – 如何使CSS中的子元素居中,即使它大于父对象？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。