垂直に中心を合わせようとすると余白と余白が機能しない

Question

赤いブロックをWebページの中央に配置しようとし、フッターブロックを赤の下に、最後に白のブロックを上に赤いブロックとフッターの左と右が何らかの理由でマージントップが動作していません。

デッドリンクが存在するようにローカルファイルからマイコードをコピーしましたが、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

変更この：

#container: { display:flex; } 

EDIT/ADDITION：

は `#container」の周りに他のラッパーを追加し、これらの設定を与える：

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

を

（同じ編集）codepen：http://codepen.io/anon/pen/GZLvpj

Answer 2

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から

：

：

'マージントップ' または「マージン底が 'auto' である場合は、その使用される値は0です。

https://www.w3.org/TR/CSS2/visudet.html#blockwidthからです

'margin-left'と 'margin-right'の両方が 'auto'の場合、使用される値は です。