Question

你好！

这似乎是一个非常简单的问题，但我似乎无法将标题DIV水平居中。

http://jsfiddle.net/1ucwafx6/ 如你所见，浅蓝色的圆角正方形几乎居中，但并不完全。我尝试过多个系统，浏览器和屏幕分辨率，结果总是一样的。它稍微偏右。我真的不明白这里有什么问题。我也尝试了margin: 0 auto;然而它只是没有做任何事情而只是停留在左侧。

Answer 1

这可以帮助您集中精力，假设您希望使用当前的HTML标记来保持位置。

JS FIDDLE

#header {
  position: fixed;
  width: 90%;
  background-color: #3498db;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: 25px;
  border-radius: 10px;
}

Answer 2

这是由于身体的默认边距。只需设置

body { margin:0; }

你会看到修复。

Answer 3

我删除了固定位置，并将左右边距设置为自动，并且它居中正常。

http://jsfiddle.net/1ucwafx6/3/

CSS：

#header {
    /* position: fixed; */
    width: 90%;
    background-color: #3498db;
    margin-left:auto;
    margin-right: auto;
    margin-top: 25px;
    border-radius: 10px;
}

Answer 4

添加

#header {
    left:0;
}

http://jsfiddle.net/1ucwafx6/4/

无法居中DIV

你好！

4 个答案: