水平と垂直の見出しをどのように配置するか（フレックスボックス）？

Question

<h1>の見出しをフレックスボックスを使用してページの中央に正確に配置する方法がわかりません。ここで

リンクです：https://jsbin.com/movevezesi/edit?html,css,output

所望の効果：https://tutorialzine.com/media/2016/06/landing-page-hero.jpg

HTML：

<div class="wrap"> 
<header class="header"> 
    <a class="logo" href="#">logo</a> 

    <ul class="nav"> 
    <li><a href="#">Features</a></li> 
    <li><a href="#">Pricing</a></li> 
    <li><a href="#">Sign In</a></li> 
    <li><a href="#">Free Trial</a></li> 
    </ul> 
    </header> 
    <div class="hero"> 
     <h1>how to center horizontally and vertically this text ???</h1> 
     <h2>any</h2> 
     <h3>ideas???</h3> 
    </div> 
</div> 

はCSS：

Answer 1

フレックスボックスをネストし、その方向をカラムに変更したいと思うでしょう。あなたの代わりに位置50％のハックのことを引き続き使用したい場合、私は一緒にフレキシボックスを使用する例を置く：

.wrap { 
 
    display: flex; 
 
    
 
    /* 
 
    flex-direction: column keeps the nav and 
 
    hero in vertical alignment 
 
    */ 
 
    flex-direction: column; 
 
    border: 1px solid red; 
 
    height: 500px; 
 
} 
 

 
.hero { 
 
    display: flex; 
 
    
 
    /* 
 
    again, using flex-direction:column to keep 
 
    the nested headers in vertical alignment 
 
    */ 
 
    flex-direction: column; 
 
    
 
    /* 
 
    flex-grow tells .hero to grow along the main 
 
    flex axis of its parent. in this case we set 
 
    wrap to flex-direction:column, so .hero stretches 
 
    vertically 
 
    */ 
 
    flex-grow: 1; 
 
    
 
    /* 
 
    justify-content sets the children's layout 
 
    along the parent's main axis. in this case 
 
    the headers will group up in the vertical middle 
 
    of .hero 
 
    */ 
 
    justify-content: center; 
 
    
 
    /* 
 
    align-items sets the children's layout perpendicular 
 
    to the parent's main axis. so in this case they'll bunch up 
 
    along the horizontal center 
 
    */ 
 
    align-items: center; 
 
    
 
    
 
    border: 1px solid red; 
 
    
 
} 
 

 
.hero > * { 
 
    border: 1px solid black; 
 
    
 
    /* 
 
    without this text-align, the headers would 
 
    be centered horizontally, but the text inside those 
 
    headers would still be left-aligned 
 
    */ 
 
    text-align: center; 
 
}

<div class="wrap"> 
 
    <header class="header"> 
 
    <a class="logo" href="#">logo</a> 
 

 
    <ul class="nav"> 
 
     <li><a href="#">Features</a></li> 
 
     <li><a href="#">Pricing</a></li> 
 
     <li><a href="#">Sign In</a></li> 
 
     <li><a href="#">Free Trial</a></li> 
 
    </ul> 
 
    </header> 
 
    <div class="hero"> 
 
    <h1>how to center horizontally and vertically this text ???</h1> 
 
    <h2>any</h2> 
 
    <h3>ideas???</h3> 
 
    </div> 
 
</div>

Answer 2

あなたは次のクラスを使用することができます。要素を水平方向と垂直方向に中央に配置します。

.centerElement{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

<div class="hero centerElement"> 
    <h1>how to center horizontally and vertically this text ???</h1> 
    <h2>any</h2> 
    <h3>ideas???</h3> 
</div> 

ホッピングは役に立ちます。