如何使用一個類將任何元素水平居中？

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元素以及其他元素居中對齊。 這是完整的演示 。

Answer 2

您可以使用以下centered類：

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

為。。。工作：

• <div>標記；
• 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時，此方法才有效。