仅使用 CSS 居中内容？ [复制]答案

【问题标题】：Centering Content using CSS only? [duplicate]仅使用 CSS 居中内容？ [复制]
【发布时间】：2011-10-11 12:13:43
【问题描述】：

可能重复：
How do you easily horizontally center a <div> using CSS?

我已经阅读了多种使用 CSS 在页面上居中内容的方法。我不是在谈论文本，我是在谈论图像或容器等内容。

使内容居中的最佳方式是什么？

设置框的宽度，然后使用 left: 50%?

我已经阅读了很多方法，但试图了解哪种方法真正效果最好、跨浏览器友好且适用于旧版浏览器时，确实会让人感到困惑。

关于什么是真正最好和最有效的方法有什么想法吗？

谢谢！

【问题讨论】：

这已经被问了一百万次了。例如，stackoverflow.com/questions/618097/…stackoverflow.com/questions/114543/how-to-center-div-in-div
我意识到这已经问了一百万次了，但这就是为什么我要求澄清哪种方法真正是最好的使用方法。因为当您阅读其中的许多内容时，您会得到各种各样的答案。感谢您的输入 =>
据我所知，答案总是一样的：使用margin-left/right:auto。我不知道任何替代方案，但我很想了解一些:)

【解决方案1】：

居中 div：

<div class="pageContainer">
    The awesome content is here
    <div> the secret of life....</div>
    .... more content ....
</div>

CSS：

body {
  width: 100%;
}
.pageContainer {
   width: 600px;
   margin: 0px auto;
}

这将使页面上宽度为 600px 的 div 水平居中。

边距：0 自动；将左右边距设置为页面左侧和右侧的任何像素。

例如页面宽度为800px，左边距为100px，右边距为100px，将600px移到页面中心

【讨论】：