我想定义一个类,这样我将该类应用到哪个元素时,该元素将在其父容器中水平居中。
该类可以应用于img
、iframes
或divs
,每个类的大小都可能不同。
有可能为他们所有人开设这样一个班吗?
如何实现这一点呢?解决方案可能需要根据元素的大小和剩余空间自动设置左右边距相等的值?但这是如何实现的。
我能接触到的最接近的是这个,但它不起作用:
.centreThis{
margin: 0 auto;
max-height: 964px;
max-width: 680px;
overflow: hidden;
border: 10px solid #ddd;
}
最佳答案
使用CSS规则的组合来处理各种元素:
.center {
width:auto;
text-align:center;
margin-left:auto;
margin-right:auto;
position:absolute;
left:50%;
transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
}
这将使元素和其他元素居中对齐。这是完整的demo。