Question

尝试将红色块放在网页中间，红色底部的页脚块，最后是红色块顶部和页脚之间的白色块。由于某些原因，保证金顶部不起作用，尽管左右都是......

从本地文件复制我的代码，因此有一些死链接，但我认为它们与CodePen无关，因为它仍然显示相同。

#container {
    display:block;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    border:solid black;
    border-width: 3px;
    border-radius:5px;
    background-color:red;
    height:650px;
    width:850px;
    padding:1px;
}

#container.hover {
}

.wrapper {
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:auto;
    height:450px;
    width:650px;
    background-color:white;
    border:solid black;
    border-width:1px;
}

#grid {
    display:inline-block;
    float:left;
    background-color:white;
    height:10px;
    width:10px;
    border: solid black;
    border-width:.5px;
    margin-left:auto;
    margin-right:auto;
    margin-top: auto;
    margin-bottom: auto;
    padding:.5px .5px .5px .5px;
}

#foot {
    display:block;
    height:90px;
    border:solid black;
    border-width: 2px;
    margin-top:auto;
}

http://codepen.io/Kennpow/pen/bpJRvw

Answer 1

margin-top:auto和margin-bottom:auto无法按照您认为的方式与margin-left:auto和margin-right:auto进行比较。

margin-top:auto和margin-bottom:auto将计算为0，而margin-left:auto和margin-right:auto将计算为相等的边距。我认为这与浏览器呈现页面的方式有关。

来自https://www.w3.org/TR/CSS2/visudet.html#normal-block：

如果'margin-top'或'margin-bottom'为'auto'，则其使用值为0.

来自https://www.w3.org/TR/CSS2/visudet.html#blockwidth：

如果'margin-left'和'margin-right'都是'auto'，则使用它们的值是平等的。

Answer 2

改变这个：

#container: { display:flex; }

EDIT / ADDITION：

在`＃container＆＃39;周围添加另一个包装器并给它这些设置：

#wrap_all {
  display:flex;
  height: 100vh;
}

（相同，已编辑）codepen：http://codepen.io/anon/pen/GZLvpj

当我尝试垂直居中时，边缘顶部和边缘底部不起作用

2 个答案: