在调整页面大小时保持“静态大小”div居中

Question

我有一个宽度为465px的div，我想在页面调整大小时保持居中。当使用设定宽度而不是使用％时，我无法真正集中它。

示例：我使用过“margin-left：40％;”但是当屏幕很小时，div会被推到右边太远（因为它不会随着屏幕而缩小），而当页面全屏时，div就会离得太远。

Answer 1

你可以这样做：

div {
    position: absolute;
    left: 50%; // Position 50%
    top: 50%;
    width: 465px;
    height: 465px;
    margin: -232px 0 0 -232px; // - ( width / 2 ) to center and height
}

Answer 2

只要您设置了宽度，只需在CSS中使用此功能即可获得一致的水平居中。

.name-of-div {
  width:465px;
  margin:auto auto;
}

此外..如果您希望它水平和垂直居中，请查看此页面，该页面演示了以下CSS

.name-of-div {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

http://codepen.io/shshaw/full/gEiDt

Answer 3

这也应该有效margin:0 auto;