无法居中 DIV

Question

嗨！

这似乎是一个愚蠢的简单问题，但我似乎无法水平居中 header DIV。

如您所见，浅蓝色圆角正方形几乎居中，但不完全居中。我试过多种系统、浏览器和屏幕分辨率，结果总是一样的。它稍微靠右一点。我真的不明白这里出了什么问题。我也试过 margin: 0 auto; 但是它什么也没做，只是停留在最左边。

Answer 1

假设您希望位置与当前 HTML 标记保持固定，这应该可以帮助您将其居中。

#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

Cannot center DIV

html

css

center

嗨！