ページ上に1つの子divを水平方向および垂直方向にセンタリングする

Question

子は、垂直方向ではなく水平方向にセンタリングしています。私はこれは、コンテナの例が高さを必要とするためだと思います。それをページ全体に集中させたいのですが？

それは高さは、デフォルトで子として同じ大きさになるのです

.example-container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.example-child { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: orange; 
 
}

<div class="example-container"> 
 
    <div class="example-child"> 
 
    <p>Sample Content...</p> 
 
    </div> 
 
</div>

Answer 1

以下のコード・スニペットを参照してください。 height: 100vhなどをレイアウトに追加してください。

body { margin: 0; } 
 

 
.example-container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100vh; 
 
} 
 

 
.example-child { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: orange; 
 
}

<div class="example-container"> 
 
    <div class="example-child"> 
 
    <p>Sample Content...</p> 
 
    </div> 
 
</div>

Answer 2

それはtransform代わりのflexbox

を使用して以下のマークアップと、より広いブラウザのサポートを行うことができますページに水平方向と垂直方向

を単一の子のdivを中心に

.example-container { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: orange; 
 
}

<div class="example-container"> 
 
    <p>Sample Content...</p> 
 
</div>