Question

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

请参阅this 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 。所以 white-wrap 的CSS应该是：

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

Answer 2

尝试

#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 3

这是我最喜欢的方法（适用于所有现代浏览器和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 4

您也应该设置这些属性：

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

一旦你为DIV或其他任何东西定义了一个尺寸，边距，填充和一切都将在尺寸中，并且不会增加尺寸。

使用百分比边距居中div

4 个答案: