Question

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

我该怎么做？通常移动的东西我浮动它们或使用position：absolute;，但我想这样做与浏览器窗口相关，而不是通常移动的东西。

Answer 1

这会使div水平居中：

#yourDiv {
    margin: 0 auto;
}

Answer 2

您可以使用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 3

这里是水平和垂直居中的s fiddle

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和max-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居中并响应浏览器。

完美居中（响应？）div

5 个答案:

媒体查询

百分比