當我嘗試垂直居中時，邊緣頂部和邊距底部不起作用

試圖將我的紅色塊置於網頁中間，並將頁腳塊置於紅色底部，最後在頂部之間放置白色塊的紅色塊和頁腳。由於某種原因，保證金頂部不工作，雖然左側和右側是..當我嘗試垂直居中時，邊緣頂部和邊距底部不起作用

從本地文件複製我的代碼，所以有一些死鏈接，但我認爲他們是無關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

當我嘗試垂直居中時，邊緣頂部和邊距底部不起作用

回答

相關問題