html - 如何使用一个类来水平居中任何元素？

Question

我想定义一个类，这样无论我将哪个元素应用到该类，该元素都会在其父容器中水平居中。

该类可以应用于 img 、iframes 或 divs，每个都可以有不同的大小。

是否有可能为他们所有人开设这样一个类(class)？

如何实现这一点，解决方案可能需要根据元素的大小和剩余空间自动设置左右边距彼此相等？但如何才能实现。

我能到达的最近点是这个，但它不起作用:

.centreThis{
margin: 0 auto;
max-height: 964px;
max-width: 680px;
overflow: hidden;
border: 10px solid #ddd;
}

Answer 1

使用 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%);
}

这将使 p、img、div 和 iframe 元素以及其他元素居中对齐。这是完整的 demo .