logo标签列表

不使用"margin:auto;"如何使<div>居中？

htmlcssgoogle-chrome
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;
}
2
能否引用一下Chrome问题的来源？ - Joe Frambach
我正在使用Kimodo Edit 8.0，并使用Google Chrome预览代码。所以如果你的意思是要源代码，我就无法提供了吗？ - user2209563
不，他的意思不是那样。他要求你证实你所声称的“这个函数在谷歌浏览器中不受支持”的说法。 - Jonathan Wood
我在各种帖子中看到了类似的信息，说margin:auto;在FF中有效但在IE或Chrome中无效。 - user2209563
哇，那是从2007年的。 - Joe Frambach
4个回答
14

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

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

http://jsfiddle.net/ZAqJM/

更新：现在大多数浏览器都支持 transform: translate，因此您可以轻松地进行以下操作：

{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}
非常感谢！这个完美地解决了我的问题，我一直在寻找一个可以保持位置固定的选项。 - user2209563
3

我知道这可能有点老了，但我认为值得一提的是以下内容就像魔法一样：

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

供日后参考。

2
使用 margin: auto; 居中一个 <div> 在各种浏览器中都是有效的。但需要确保你想要居中的 <div> 被包含在一个块级元素中。
<div class="headerContainer">
    <div id="header">
        <p>John Doe</p>
        <p>email</p>
    </div>
</div>

为了使居中对齐起效，你的 div#header 需要是 块级元素，必须有一个 width 属性，并且是一个父级 块级元素 的子元素。（尽管 <body> 技术上是 块级元素 ，但你可能想要保持头部的容器性质。）
因此，请从 #header { ... } 中删除 position: fixed。请参见工作示例：http://jsfiddle.net/amyamy86/2sXdC/。
完美，可以了！非常感谢！问题：为什么我不能包含position: fixed;？我的想法是将div#header固定在页面上，这样当我向下滚动页面时，div#header保持可见。 - user2209563
position: fixed 和 position:absolute 会将元素从页面的自然流中移除，然后父容器将不会在计算其高度/宽度时包括该元素。 在您的情况下，父容器认为它不再具有 <div class="header"> 作为子元素。 - Amy
0

margin:auto 是为了有宽度且设置左右边距相等的对象而设计的。

Div 基本上是具有全宽（100％）的 BLOCK，因此设置 margin:auto 不会得到任何东西，因为宽度已经填满父容器。

为了使其工作，您可以通过两种方式实现：

  1. 对于 div 使用 text-align:center -> 这将使 div 内部文本居中对齐。
  2. 在 div 中包含 width 属性（即 width:200px），则它将正常工作。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接