css - 在 css 中居中

Question

我试图将滚动时不断出现的 div 居中。我应该如何将它居中，因为我已经尝试了所有我见过的方法，但似乎都没有用。 这是代码:

#header {
position:fixed;
top:0%;
left:0%;
height:100px;
width:100%;
}

<div id='header'>
<button class='butt'>Home</button>
<button class='butt'>Home</button>
<img id='logo' src='Website/GUGM still logo.png' />         <!--Header That Moves-->
<button class='butt'>Home</button>
<button class='butt'>Home</button>
</div>

Answer 1

根据标题的行为，有几种方法。

如果您的 header 具有固定宽度，请将 left 和 right 属性设置为 zero 并设置左右 margin 到 auto:http://jsfiddle.net/YHrUm/

div {
    background:red;
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:50%;
    width:200px;
    margin:0 auto;
}

如果您的标题有百分比宽度，您只需将 left 和 right 属性设置为正确的百分比。例如，如果您的 header 将是宽度的 80%，您可以这样做:http://jsfiddle.net/YHrUm/1/

div {
    background:red;
    position:fixed;
    top:0;
    left:10%;
    right:10%;
    height:50%;
}

但是，如果您的 header 具有 100% 宽度，那么您可能希望将内容居中，就像其他人所说的那样，您可以使用 text-align:center 来做到这一点。

编辑

额外一点:left 和 right 以及 auto 的技巧也适用于 top 和 底部。您只需将 auto 应用于正确的 margin。