水平居中答案

【问题标题】：Centering horizontally水平居中
【发布时间】：2013-12-28 11:14:34
【问题描述】：

我网站的标题和导航栏具有绝对定位，因此在图像滚动时它们会保持原位。

http://www.mikegarten.com/

我正在尝试将整个网站水平居中。

我尝试使用this method，但没有成功。

我试图将我的图像放入一个表格中，然后将其居中在一个 div 中，但是水平图像的上方和下方都有空白空间，由同一行中的垂直照片的网格创建。

是否可以“包装”这个网站，还是我需要使用其他方法？

【问题讨论】：

只是一个建议。把所有东西都放在绝对位置是不好的做法。
^ 同意。好的做法是将任何 absolute 项嵌套在 relative 容器中。

标签： html css css-position centering

【解决方案1】：

至少有三种未弃用的方式来水平居中。

margin: auto (explained at LearnLayout.com)
ugly hacking of position 带有包装元素（问题链接到该元素）
更丑陋的position黑客，这次设置position: absolute; left: 50%; margin-left: -<half the width of this box>

我推荐使用第一种方法。您必须确保要居中的元素具有display: block、float: none 和position 设置为normal 或relative。它还必须具有有限的宽度（小于其父级的 100 %），这是显而易见的。

【讨论】：

【解决方案2】：

您可以将 left css 属性设置为 50%，然后添加元素宽度一半的 margin-left * -1，因此要将 name 元素居中，请将 left 属性设置为 50%，将 margin-left 设置为-132 像素；

#name {
    position: fixed;
    top: 20px;
    z-index: 3;
    left: 50%;
    margin-left: -132px;
}

#navtext {
    position: fixed;
    top: 105px;
    background-color: none;
    width: 1000px;
    left: 50%;
    z-index: 3;
    margin-left: -500px;
}

对于您的 3 列，您需要将它们放在一个包装 div 中，并将其宽度设置为您想要的宽度，并将 margin-left 和 margin-right 设置为 auto。

【讨论】：

【解决方案3】：

您已经制作了网站position:absolute 上的所有网格元素。这就是为什么它不会居中，因为你已经告诉它在一个确切的位置。此外，如果您将网格包裹在一个包装器 div 中，这样您就可以将它们作为一个整体进行定位。

使用宽度和边距。然后，您可以使用填充来分隔其余网格元素。

【讨论】：

【解决方案4】：

html中有<center></center>标签，但我认为这已经过时了。另一种方法是使用 CSS 将其居中，给它一个宽度和边距：auto；

【讨论】：

只是为了确认center标签已被弃用，不应使用