将标题div放在屏幕中央的顶部

Question

有人能告诉我如何让这个div居于屏幕顶部，与左右两侧的页面边界距离相等。

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

谢谢！

Answer 1

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

margin:0 auto;

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

Sample implementation

Answer 2

那么它取决于父元素，以及为什么你将它作为position：relative;，但通常将一个具有设置宽度的块级元素居中，在它的父元素中，你可以使用：

margin:0 auto

Answer 3

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

margin:0 auto;

Answer 4

你应该试试这个jsfiddle：

HTML：

<div>This is some DIV</div>

CSS：

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

Answer 5

通常在执行此操作时，您需要执行以下操作。它将保持它的父元素的界限，无论你把它放在页面上的哪个位置，都会把它放在中间。

如果你想把它放在代码中：     风格=”     保证金左：自动;     余量右：汽车;“

否则只需将它添加到你的css中即可。

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

Answer 6

使用保证金：0自动;

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