css 不< div>使用“边距”居中：自动;”

l3zydbqr 于 2023-03-05 发布在其他

关注(0)|答案(4)|浏览(185)

我正在寻找一种方法来中心的div水平在谷歌浏览器的页面。
我试过使用保证金：但是我读到Google Chrome不支持这个功能，结果我的div保持在屏幕的左边。
例如，如果我使用margin-left：100px; div确实会移向页面的中心，但我不想手动将其居中。
超文本：

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

css

来源：https://stackoverflow.com/questions/15627401/centering-div-without-using-margin-auto

4条答案

按热度按时间

iszxjhcz1#

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

赞(0）回复(0）举报 2023-03-05

drnojrws2#

我知道这是相当古老的，但我认为值得一提的是，以下作品像魔术：

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

以备将来参考。

赞(0）回复(0）举报 2023-03-05

e5nqia273#

使用margin: auto;居中一个<div>可以跨浏览器工作。你需要确保你试图居中的div包含在一个块级元素中。

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

为了正确居中，div#header需要是 * 块级 *，并且必须有一个width，并且是一个 * 块级 * 元素的子元素。（从技术上讲，<body>是 * 块级 *，但是您可能希望保留标头的“containship”）
因此，从#header { ... }中删除position: fixed。请参见工作示例：http://jsfiddle.net/amyamy86/2sXdC/

赞(0）回复(0）举报 2023-03-05

7nbnzgx94#

margin：auto是为有宽度的对象设置的，并且左右边距相等。
Div基本上是具有全宽（100%）的BLOCK，因此设置margin：auto是不会得到任何东西的，因为宽度是父对象的全宽。
为了让它起作用，你可以用两种方法，
1.使用文本对齐：div居中-〉这将对齐div中心内的文本
1.在div中包含宽度属性（即宽度：200 px），它将工作得很好。

赞(0）回复(0）举报 2023-03-05

我来回答

css 不< div>使用“边距”居中：自动;”

4条答案

相关问题

热门标签

最新问答