Question

我有类似于以下结构的东西：

<html>
<body>
    <div>
    </div>
</body>
</html>

我希望内部div占据页面的完整垂直高度，除了顶部和底部的8px边距。我也希望这个div在体内水平居中，左右边距最小为8px。我不希望页面滚动，并且不需要为浏览器支持能力不惜一切代价地使用calc（）。

我试过了：

html, body{
    height: 100%;
}
div {
    position: absolute;
    top: 8px;
    bottom: 8px;
}

这对于强制它留下8px“边距”是好的，但是如果不使用calc（）就不可能水平居中，因为它的宽度是可变的并且没有相对于它的元素。

Answer 1

我希望我理解你的问题......你希望div填满整个窗口，除了8px ......是吗？

你可以使用这个CSS来做到这一点：

div {
    background: lightblue;
    position: absolute;
    top: 8px;
    left: 8px;
    bottom: 8px;
    right: 8px;
}

检查demo。

[选项2]

如果您希望div具有固定宽度（或使用max-width或min-width半固定），则可以使用此代码：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    padding: 8px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;    
}
div {
    background: lightblue;
    width: 300px;
    margin: 0 auto;
    height: 100%;
}

它表示主体为100％高度和宽度，并计算其宽度内的填充（因此box-sizing）属性。然后，您可以在div上指定宽度，并使用margin: 0 auto将其居中。

检查updated demo。

Answer 2

http://jsfiddle.net/5X79H/1/

以下代码将使您的div居中：

<body>

<div class="container">
  <div class="center"></div>
</div>

</body>

式：

.center {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    background-color:maroon; 
    width:100px; 
    height: 100px;
}
.container{
       width:100%;
    text-align: center;

}

Answer 3

您可以使用保证金：

div {
   margin: 0 auto;
}

Answer 4

div{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

居中的div

更新：删除位置：绝对; FIDDLE

Answer 5

我认为最好引入新的div：

<body>

<div class="container">
  <div class="center"></div>
</div>

</body>

然后在你的CSS中你可以这样做：

.container {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  right: 0;
}
.center {
  margin: 0 auto;
}

div需要水平居中并完全占据垂直空间

5 个答案: