居中 <div> 而不使用“margin: auto;”答案

【问题标题】：Centering <div> without using "margin: auto;"居中 <div> 而不使用“margin: auto;”
【发布时间】：2016-10-15 03:54:20
【问题描述】：

我正在寻找一种在谷歌浏览器页面中水平居中 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;
}

【问题讨论】：

注意引用 chrome 问题的来源？
我正在使用 Kimodo Edit 8.0 并使用 Google Chrome 预览代码。所以我无法找到来源，如果你是这个意思？？？
不，他不是这个意思。他要求您证实您的说法，即您“读到 Google Chrome 不支持此功能”。
webdeveloper.com/forum/… ...我在各种线程中看到了类似的信息，说 margin:auto;为 FF 工作，但不在 IE 或 Chrome 中。
哇，这是从 2007 年开始的。

标签： html css google-chrome

【解决方案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%);
}

【讨论】：

非常感谢！这非常有效，我一直在寻找一个保持位置固定的选项。

【解决方案2】：

使用margin: auto; 使<div> 居中可跨浏览器工作。您需要确保要居中的 div 包含在 block-level 元素中。

<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/

【讨论】：

完美，有效！太感谢了！问题：为什么我不能包含位置：固定；？我的想法是保持 div#header 固定，以便当我向下滚动页面时 div#header 保持可见。
@user2209563 position: fixed 和 position:absolute 将从页面的自然流中删除元素，然后父容器将不会在其计算 height/width我>。在您的情况下，父容器认为它不再有 <div class="header"> 作为孩子。

【解决方案3】：

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

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

供日后参考。

【讨论】：

【解决方案4】：

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

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

要使其发挥作用，您可以通过 2 种方式来实现，

对 div 使用 text-align:center -> 这将在 div 中心对齐文本
在 div 中包含 width 属性（即 width:200px），它会正常工作。

【讨论】：