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

试图将我的红色块置于网页中间，并将页脚块置于红色底部，最后在顶部之间放置白色块的红色块和页脚。由于某种原因，保证金顶部不工作，虽然左侧和右侧是..当我尝试垂直居中时，边缘顶部和边距底部不起作用

从本地文件复制我的代码，所以有一些死链接，但我认为他们是无关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

来源

2016-05-13 KenP

你试过了'margin：auto;'？ –

[Margin-top/bottom不可用于示例中的margin-left/right]的可能重复（http://stackoverflow.com/questions/28960204/margin-top-bottom-not-works-the-to-边缘左右在一个样本） –

复制http://stackoverflow.com/q/6775273/1028949 – Quantastical

更改此：

#container: { display:flex; }

编辑/添加：

添加另一个包装围绕'#container的”，并给它这些设置：

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

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

来源

2016-05-13 19:16:41 Johannes

这工作伟大的狐狸集中在框中。谢谢！现在我需要将整个事情集中到网页中。 – KenP

@KennyPower请看我更新的答案，并更新codepen。 – Johannes

谢谢。搞定了！ – KenP

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：

如果 '边距' 或 '边距' 是 '自动'，其使用值为0

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

如果“margin-left”和“margin-right”均为“auto”，则其使用的值相等。

来源

2016-05-13 19:26:36

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

回答

相关问题