7

我正在寻找一种在 Google Chrome 页面中水平居中 div 的方法。

我尝试使用 margin: auto; 但我读过 Google Chrome 不支持此功能。结果，我的 div 保持与屏幕左侧对齐。

例如，如果我使用 margin-left: 100px; div 确实向页面中心移动，但我不想手动将其居中。

HTML：

<body>
    <div id="header">
        <p>John Doe</p>
        <p>email</p>
    </div>   
</body>

CSS：

body 
{
    background-color: #f0f0f0;
}

div 
{
    border-radius: 5px;    
}

#header 
{
    position: fixed;
    background-color: #3399ff;
    color: white;
    width: 60%;
    margin: auto;
}

#header p 
{
    display: inline;
}
4

4 回答 4

14

margin: auto不适用于固定（或绝对）位置的 div。相反，您需要将left: 50%左边距设置为元素宽度的负一半。

#header 
{
    position: fixed;
    width: 60%;
    left: 50%;
    margin-left: -30%;
}

http://jsfiddle.net/ZAqJM/

更新：到目前为止，大多数浏览器都将支持transfrom: translate，因此您可以轻松地执行以下操作：

{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}
于 2013-03-26T00:51:09.810 回答
2

居中<div>使用margin: auto;跨浏览器的作品。您需要确保要居中的 div 包含在块级元素中。

<div class="headerContainer">
    <div id="header">
        <p>John Doe</p>
        <p>email</p>
    </div>
</div>

要正确居中，您div#header需要是块级的，并且必须有一个width并且是块级元素的子元素。（技术上<body>是块级，但您可能希望维护标题的“容器”）

因此，删除position: fixedfrom #header { ... }。请参阅工作示例：http: //jsfiddle.net/amyamy86/2sXdC/

于 2013-03-26T00:46:25.447 回答
2

我知道这已经很老了，但我认为值得一提的是，以下内容就像魔术一样：

#header {
  left: 50%;
  transform: translateX(-50%);
}

供日后参考。

于 2015-07-10T14:02:57.213 回答
0

margin:auto 用于具有宽度并设置左右边距相等的对象。

Div 基本上是带有 FULL-WIDTH (100%) 的 BLOCK，因此设置 margin:auto 不会得到任何东西，因为宽度对父级已满。

为了让它工作，你可以通过两种方式做到这一点，

  1. 对 div 使用 text-align:center -> 这将在 div 中心对齐文本
  2. 在 div 中包含宽度属性（即宽度：200px），它会正常工作。
于 2013-03-26T00:53:08.353 回答