前後の他の要素に関係なく、要素を水平方向と垂直方向に中央に揃える方法は？

Question

https://codepen.io/joshuajazleung/pen/JyONYa

<main> 
    <header>Logo</header> 
    <div class="center"> 
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore, laudantium, nam in quia aspernatur animi aut sit eum officia minima cumque obcaecati fugit numquam accusantium distinctio quas recusandae repudiandae reiciendis.</p> 
    </div> 
</main> 

html, body, main { 
    padding: 0; 
    margin: 0; 
} 

main { 
    height: 600px; 
    width: 100%; 
    background: red; 
} 

header { 
    height: 100px; 
} 

.center { 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

は、ここで私は.center div要素が水平方向と垂直方向<main>要素に絶対にフレキシボックスを使用していることを中心にしたいです。しかし、<header>が存在すると、<header>は<main>にある程度のスペースを取っていたため、.centerは若干シフトします。どのようにして絶対センタリングを達成できますか？

Answer 1

それは他のすべての要素によって無視されるように、絶対にあなたのヘッダーを設定します。

header { 
    height: 100px; 
    width: 100%; 
    position: absolute; 
    background: green; 
} 

html, 
 
body, 
 
main { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
main { 
 
    height: 600px; 
 
    width: 100%; 
 
    background: red; 
 
} 
 

 
header { 
 
    height: 100px; 
 
    width: 100%; 
 
    position: absolute; 
 
    background: green; 
 
} 
 

 
.center { 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<main> 
 
    <header>Logo</header> 
 
    <div class="center"> 
 
    <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore, laudantium, nam in quia aspernatur animi aut sit eum officia minima cumque obcaecati fugit numquam accusantium distinctio quas recusandae repudiandae reiciendis.</div> 
 
    </div> 
 
</main>

Answer 2

代わりにposition: absoluteを追加してみることもできます。これにより、通常のフローからヘッダーが取り出され、.center要素は全体の<main>要素の中央になります。

Answer 3

これは動作します。

html, body, main { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
main { 
 
    height: 600px; 
 
    width: 100%; 
 
    background: red; 
 
    display: flex; 
 
} 
 

 
header { 
 
    height: 100px; 
 
} 
 

 
.center { 
 
    margin: auto; 
 
}

<main> 
 
    <header>Logo</header> 
 
    <div class="center"> 
 
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore, laudantium, nam in quia aspernatur animi aut sit eum officia minima cumque obcaecati fugit numquam accusantium distinctio quas recusandae repudiandae reiciendis.</p> 
 
    </div> 
 
</main>