Question

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

我尝试使用margin：auto;但我已经读过谷歌浏览器不支持此功能。结果，我的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;
}

Answer 1

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%);
}

Answer 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: fixed移除#header { ... }。请参阅工作示例：http://jsfiddle.net/amyamy86/2sXdC/

Answer 3

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

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

供将来参考。

Answer 4

margin：auto用于具有宽度的对象，并设置左右边距。

Div基本上是BLOCK with FULL-WIDTH（100％）所以设置margin：auto是没有得到任何东西，因为宽度已经满了父。

为了使其有效，你可以通过两种方式做到这一点，

使用text-align：center for div - ＆gt;这将对齐div center中的文本
在div中包含width属性（即宽度：200px），它将正常工作。

居中<div>而不使用“margin：auto;”</div>

4 个答案: