仅使用CSS如何使内容居中？

Question

5

可能是重复的问题:
如何使用 CSS 轻松水平居中 <div>?

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

什么是最好的居中内容的方法？

设置盒子的宽度然后使用类似于 left: 50% 的东西吗？

我已经阅读了很多方法，并且真的很难理解哪种方法最好，并且可以跨浏览器友好地工作并在旧浏览器中起作用。

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

谢谢！

- L84

这个问题已经被问了无数次。例如，https://dev59.com/4HRB5IYBdhLWcg3wc280 https://dev59.com/C3VD5IYBdhLWcg3wBW3d - user123444555621

我知道这个问题已经被问了无数次，但这也是我为什么要澄清哪种方法才是真正最好的原因。因为当你阅读许多这样的问题时，你会得到各种各样的答案。谢谢你的回答。 - L84

据我所知，答案总是相同的：使用 margin-left/right:auto。我不知道是否有其他选择，但我很想学习一些 :) - user123444555621

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ibu · Accepted Answer

居中:

<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水平居中于页面。

margin: 0 auto; 将左右边距设置为页面左右各剩余的像素值。

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