Question

我想定义一个类，以便我将该元素应用于该类，该元素在其父容器中水平居中。

该课程可以应用于img，iframes或divs，每个课程的大小可能不同。

是否可以为所有人提供这样的课程？

如何实现这一点可能解决方案需要设置正确，左边距自动相等，并根据元素的大小和空间？但是如何实现这一目标。

我能够达到的最近但是它不起作用：

.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 。

Answer 2

您可以使用此centered课程：

.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

致力于：

<div> tag;
img标记
iframe标记

JSFIDDLE

编辑：如果您使用该标记<div>在the text will not center内放置一些文字，则会导致您没有设置text-align: center属性。

我如何以中心DIV为中心？ 很简单，只需在div和CSS中添加<p>元素：

.centered p {text-align: center;}

Answer 3

尝试在容器元素上使用text-align: center;，在要居中的子元素上使用display: inline-block;。

另请注意，margin: 0 auto;方法仅在您定义了width时才有效。

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

3 个答案: