html - 将标题 div 放在屏幕顶部的中心

Question

谁能告诉我如何让这个 div 在屏幕顶部居中，与左右页面边界的距离相等。

position:relative;
width:800px;
height:70px;
background-color:#0CF;
left: 15%;

谢谢！

score 2 · Accepted Answer

通过为左右边缘指定自动边距：

margin:0 auto;

这会强制浏览器在具有完整浏览器宽度的父级中均衡它们，因此它居中，因为您已明确设置width.

score 0 · Accepted Answer

使用边距：0 自动；

0 - 代表页面顶部和底部的 0px 自动 - 意味着它将根据可用的窗口大小自行调整并使其居中。

score 0 · Accepted Answer

好吧，这取决于父元素，以及为什么将其设置为 position:relative;，但通常要将具有设定宽度的块级元素居中，在其父元素中，您可以使用：

margin:0 auto

score 0 · Accepted Answer

0

由于您设置了宽度，因此您应该使用

margin:0 auto;

于 2013-05-15T15:51:39.513 回答

score 0 · Accepted Answer

你应该试试这个jsfiddle：

HTML：

<div>This is some DIV</div>

CSS：

div {
    width : 50%;
    margin : auto;
    border : 1px solid black; // To see that it is centered
}

score 0 · Accepted Answer

通常在执行此操作时，您想要执行以下操作。它将保持在其父元素的范围内以及您将其放在页面上的任何位置，但会将其放置在中间。

如果要放在代码中：style=" margin-left:auto; margin-right:auto;"

否则，只需将其添加到 div 的 CSS 中。

使用此方法不会将您的上边距和下边距设置为自动。

6 回答 6