css - 使用百分比边距居中 div

Question

我使用百分比边距将一个 div 居中在另一个 div 内。我这样做是因为父 div 将根据浏览器大小更改大小。

有关演示，请参阅此 jsfiddle。

我的 CSS：

#test-wrap {
    position: absolute;
    width: 400px;
    height: 250px;
    background-color: pink;
}

.white-wrap {
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: white;
    left: 50%; margin-left: -25%;
    top: 50%; margin-top: -25%;
}

这在 Safari 中运行良好，但在 Chrome 中，孩子div看起来比它应该的要高。

也许有更好的方法来实现这样的事情，它适用于所有浏览器并且不依赖于像素边距？任何建议将不胜感激！

Answer 1

您应该使用属性margin。所以你的白色包装CSS应该是：

.white-wrap {
    position: relative;
    margin: 0 auto;
    width: 50%;
    height: 50%;
    background-color: white;
}

Answer 2

这是我最喜欢的实现方式（适用于所有现代浏览器和 IE8+）。

<style>
/* Can be any width and height */
.block {
  height:500px;
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
</style>

<div class="block"><div class="centered">Centered Content</div></div>

这是一个模仿你的例子的jsFiddle。

Answer 3

尝试

#test-wrap {
   display: table-cell;
    width: 500px;
    height: 500px;
    background: gray;
    vertical-align: middle;
    text-align: center;
}

.white-wrap {
     display: inline-block;
    width: 200px;
    height: 200px;
    background: red;
}

Answer 4

您也应该设置这些属性：

* {
  box-sizing:                 border-box;
  -moz-box-sizing:            border-box; /* Firefox */
  -webkit-box-sizing:         border-box; /* Safari */
}

一旦您为 DIV 或其他任何内容定义了大小，边距、填充和所有内容都将在大小调整中，并且不会增加大小。