回归2022

这是一个非常古老的问题,所以我只是试图报告今天的情况:

CSS 网络和 flexbox 是您对中心、水平或垂直的最佳选项; margin:auto 方法工作得好,如果内部内容不是一个盒子(内线区块是好的); margin 50% 与 transform:translateX(50%) 是粗糙的力量,但工作得好; 与绝对的位置和 translateX/Y 也适用于水平和垂直的中心,许多对话使用它,扩展高度

这就是2022年的样子,我希望我们永远不会需要更多的网和 flexbox。

给内部 div 一些宽度,并添加 margin:0 auto; 在 CSS 属性中。

最简单的方式:

#outer { 宽度: 100%; 文本平衡:中心; } #inner { 边缘:自动; 宽度: 200px; } <div id="outer"> <div id="inner">Blabla</div> </div>

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

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

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

此分類上一篇

#inner {
  width: 50%;
  margin: 0 auto;
}

我找到了类似的路径与边缘左,但它也可以留下。

#inner {
    width: 100%;
    max-width: 65px; /* To adapt to screen width. It can be whatever you want. */
    left: 65px; /* This has to be approximately the same as the max-width. */
}