html - 完全居中（响应？）div

Question

我想制作一个完美居中/响应式的 div。

我该怎么做呢？通常要移动东西，我会浮动它们或使用 position: absolute;，但我想相对于浏览器窗口这样做，而不是一般地移动东西。

Answer 1

您可以将margin: auto;绝对定位与响应式垂直/水平居中一起使用：

<section></section>

section {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #f4d4c4;
    height: 100px; /* The only caveat is there needs to be a height defined */
    margin: auto;
    width: 100px;
}

示例：http: //jsfiddle.net/uLDVM/

Answer 2

这将使 div 水平居中：

#yourDiv {
    margin: 0 auto;
}

Answer 3

这是水平和垂直居中的小提琴

div {
    width: 100px;
    height: 100px; 
    border: 3px solid red;
    margin: 50% auto;
}

Answer 4

这就是我使用的。

.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Answer 5

使用 CSS 的最佳方法是使用margin和 amax-width来控制其宽度。像这样：

div {
  max-width: 50px;
  margin: 0 auto;
}

现在要在浏览器调整大小时更改其值，可以使用media query，也可以使用%.

媒体查询

@media only screen (max-width: 800px) {
  // change the properties if the screen is no 
  // larger than 800px in width
}

百分比

div {
  max-width: 5%;
  margin: 0 auto; // will only align it horizontally
}

您可以使用position: absolute，然后使用0它的每四个侧面。为了使其居中并拉伸到边界，而由于最大宽度而不会拉伸。

这样，您将使 div 居中并响应浏览器。