如果有人想要一个 jQuery 解决方案的中心调整这些 divs:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});

CSS 定义内容属性

它将Flexbox元件调整到容器的中心:

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

在以前的例子中,他们使用的边界: 0 自动,显示:表和其他答案使用“转换和翻译”。

每个人都知道有一个 <center> 标签,它只是不受 HTML5 支持,但它在 HTML5 中工作。

而且它正在工作,但现在不只是MDN Web Docs,但其他网站建议不要再使用它。 在这里,我可以使用你可以看到MDN Web Docs的笔记。 但无论如何,有这样的方式。

此分類上一篇

如果你不想在内部DIV上设置固定宽度,你可以做这样的事情:

#outer { 宽度: 100%; 文本顺序:中心; } #inner { 显示: inline-block; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

这使得内部的DIV变成一个可以与文本平行集中的内线元素。

#outer{
  display: flex;
  width: 100%;
  height: 200px;
  justify-content:center;
  align-items:center;
}

我只是建议使用正当内容:中心;当容器显示为 flex. 和文本平行:中心;当它是关于文本元素。

点击下面的代码并根据要求修改。

#content_block { 边界: 1px 固体黑色; padding: 10px; 宽度: 50%; 文本平衡:中心; } #container { 边界: 1px 固体红色; 宽度: 100%; padding: 20px; 显示: flex; justify-content: center; } <div id="container"> <div id="content_block"> Foo foo check</div> </div>