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

Question

我有一个宽度为465px的div，我想在调整页面大小时使其居中。当我使用设置的宽度而不是使用%时，我不能真正将它居中。

例如:我使用了“small 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;