HTML/CSS 内容始终居中

Question

如何使我的页面内容居中，使其在每种类型的屏幕尺寸上居中？例如，在 Allegorithmic 上，如果我调整浏览器的大小，中心内容将向左移动，直到到达浏览器窗口。有某些背景元素水平无限延伸（顶部的深灰色，中间的浅灰色等）。我可以在我的笔记本电脑和我的 iMac 上打开这个网站，它是居中的。我想我可以使用绝对定位从左侧移动内容 x 像素数量，但这行不通，因为在小屏幕上将内容居中的 300 像素不会在大屏幕上居中。

所以本质上我想复制 Allegorithmic 网站的功能，背景在水平方向上是无限的，但某些内容始终保持“居中”。

原文由 spentak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您希望元素始终居中，请在其样式中使用 margin: 0 auto; 。

 #yourElement{
    margin: 0 auto;
}

使用 CSS 使事物居中的 W3.org 参考

要使背景元素扩展整个页面长度，只需将它们的宽度设置为 100%，然后在其中创建一个子容器并为它们设置与上面相同的样式。我敢打赌你给出的例子只是使用 1px 的一些高度和线条来获得背景上的外观。

例子

图片背景示例

标记

<div id="background">
    <div id="content">
    </div>
</div>

CSS

 #background{
    width: 100%;
}
#content{
    width: 960px;
    margin: 0 auto;
}

原文由 Loktar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我目前首选和最可靠的解决方案是：

 display: flex;
justify-content: center;

我也成功地使用了这个：

 margin: 0 auto;
text-align: center;

第二行在某些情况下对我有帮助，其中 margin: 0 auto （ 根据 MDN 最适合旧浏览器）没有效果。我还发现这种方法在调整宽度时效果更好。

顺便说一句， 0 指的是垂直边距，你可以增加它，它是 auto 水平居中，通过让浏览器选择水平边距。

这是两个主要的解决方案，但根据我的经验，它们很容易被其他一些看似无关的属性破坏。 CSS 似乎仍然缺少一种 100% 可靠的居中容器的方法。

原文由 Nagev 发布，翻译遵循 CC BY-SA 4.0 许可协议