您可以使用一行代码,仅仅是文本同步:中心。

下面是一个例子:

<div id="outer" style="width:100%"> <div id="inner"><button>hello</button></div> </div>

只需将此 CSS 内容添加到您的 CSS 文件中,它将自动集中内容。

垂直调整到CSS中中心:

#outer {
    display: flex;
    justify-content: center;
}

垂直 + 垂直到中心在 CSS 中:

#outer {
    display: flex;
    justify-content: center;
    align-items: center;
}

您可以使用 Flexbox 如下:

#outer { 显示: flex; justify-content: center } <div id="outer"> <div id="inner"> Foo foo</div> </div>

适用于所有浏览器支持的 Autoprefixer:

#outer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

或其他

使用转换:

#inner { 位置:绝对; 左: 50%; transform:翻译(-50%) } <div id="outer"> <div id="inner"> Foo foo</div> </div>

使用 Autoprefixer:

#inner {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform:     translate(-50%);
    transform:         translate(-50%)
}

一个非常简单的和跨浏览器的答案到水平中心是将这个规则应用到母元素:

.parentBox {
    display: flex;
    justify-content: center
}

#outer { 顯示: flex; align 項目: center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

這應該是你的孩子或 #內部 div 地平線. 但你實際上看不到任何變化. 因為我們的 #外部 div 沒有高度,或者說,它的高度是自動設定的,所以它有相同的高度的所有兒童元素。

#outer { 高度: 500px; 显示: flex; 匹配元素: 中心; 背景颜色: 蓝色; } #inner { 高度: 100px; 背景: 黄色; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

您可以添加此代码:

#inner { 宽度: 90%; margin: 0 auto; text-align:center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>