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

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

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

我希望内部div占据页面的整个垂直高度，除了从上到下的8px边距。我还希望这个div在主体内水平居中，从左到右的最小边距为8px。我不希望页面滚动，并且需要避免使用calc（）来获得浏览器支持。

我试过：

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

这对于强迫它留下8px的"边距"来说很好，但如果不使用calc（），现在就无法将其水平居中，因为它的宽度是可变的，并且没有元素可以相对于它。

我希望我能正确理解你的问题。。。你想让div填满整个窗口，除了8px。。。是这样吗？

你可以使用这个CSS：

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

查看演示。

[选项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将其居中。

查看更新的演示。

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

居中div

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

您可以使用margin:

div {
   margin: 0 auto;
}

我认为最好引入一个新的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;
}

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;
}

相关内容

最新更新

热门标签：