センター内、フレックスボックス内フルスクリーン

Question

フレックスボックスの中央にテキストを表示しようとしているので、大きなボックスh4とpはボックスの中央に配置され、2つの小さなボックスのテキストは中央にありますボックス。あらゆる助けのために大きい。

body { 
 
\t -moz-box-sizing: border-box; 
 
\t -webkit-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
} 
 

 
.equal-height-container { 
 
\t margin: 0 auto; 
 
\t display: flex; 
 
\t height: 100vh; 
 
} 
 
\t 
 

 
.first { 
 
\t background-color: #fff; 
 
\t padding: 20px; 
 
\t flex: 1; 
 
} 
 
    
 

 

 
.second { 
 
\t background-color: yellow; 
 
\t flex: 1; 
 
\t display: flex; 
 
\t flex-direction: column; 
 
} 
 

 

 

 
.second-a { 
 
\t background-color: #c0dbe2; 
 
\t flex: 1; 
 
\t padding: 20px; 
 
} 
 

 

 
.second-b { 
 
\t background-color: honeydew; 
 
\t flex: 1; 
 
\t padding: 20px; 
 
}

<div class="equal-height-container"> 
 
    <div class="first"> 
 
    <h4>Feature1</h4> 
 
    <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit    standard ända sedan 1500-talet.</p> 
 
    </div> 
 
    <div class="second"> 
 
    <div class="second-a"> 
 
     <h4>Feature1</h4> 
 
     <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit    standard ända sedan 1500-talet,</p> 
 
    </div> 
 
    <div class="second-b"> 
 
     <h4>Feature1</h4> 
 
     <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem   ipsum har   varit standard ända sedan 1500-talet,</p> 
 
    </div> 
 
    </div>

Answer 1

align-items: center & justify-content: center使用。

.first,.second-a & .second-bまた、これらにもフレックスアライメントプロパティを適用してください。同様に：

body { 
 
\t -moz-box-sizing: border-box; 
 
\t -webkit-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
    margin: 0; 
 
} 
 

 
.equal-height-container { 
 
\t margin: 0 auto; 
 
\t display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
\t height: 100vh; 
 
} 
 
\t 
 

 
.first { 
 
\t background-color: #fff; 
 
\t padding: 20px; 
 
\t flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    height: calc(100vh - 40px); 
 
} 
 
    
 

 

 
.second { 
 
\t background-color: yellow; 
 
\t flex: 1; 
 
\t display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 

 

 

 
.second-a { 
 
\t background-color: #c0dbe2; 
 
\t flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    height: calc(100vh - 20px); 
 
\t padding: 20px; 
 
} 
 

 

 
.second-b { 
 
\t background-color: honeydew; 
 
\t flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    height: calc(100vh - 20px); 
 
\t padding: 20px; 
 
} 
 

 
h4 { 
 
    margin-bottom: 0; 
 
}

<div class="equal-height-container"> 
 
    <div class="first"> 
 
    <h4>Feature1</h4> 
 
    <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit    standard ända sedan 1500-talet.</p> 
 
    </div> 
 
    <div class="second"> 
 
    <div class="second-a"> 
 
     <h4>Feature1</h4> 
 
     <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit    standard ända sedan 1500-talet,</p> 
 
    </div> 
 
    <div class="second-b"> 
 
     <h4>Feature1</h4> 
 
     <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem   ipsum har   varit standard ända sedan 1500-talet,</p> 
 
    </div> 
 
    </div>

・ホープ、このことができます：

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

.first, .second-a, .second-b { 
    display: flex; 
    align-items: center; 
} 

は、以下のスニペットを見てください！

Answer 2

はtext-align: center;>が直接の子悲しいこと

body { 
 
\t -moz-box-sizing: border-box; 
 
\t -webkit-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
} 
 

 
.equal-height-container { 
 
\t margin: 0 auto; 
 
\t display: flex; 
 
\t height: 100vh; 
 
} 
 
.equal-height-container > div { 
 
\t text-align: center; 
 
} 
 
\t  
 

 
.first { 
 
\t background-color: #fff; 
 
\t padding: 20px; 
 
\t flex: 1; 
 
} 
 
    
 

 

 
.second { 
 
\t background-color: yellow; 
 
\t flex: 1; 
 
\t display: flex; 
 
\t flex-direction: column; 
 
} 
 

 

 

 
.second-a { 
 
\t background-color: #c0dbe2; 
 
\t flex: 1; 
 
\t padding: 20px; 
 
} 
 

 

 
.second-b { 
 
\t background-color: honeydew; 
 
\t flex: 1; 
 
\t padding: 20px; 
 
}

<div class="equal-height-container"> 
 
    <div class="first"> 
 
    <h4>Feature1</h4> 
 
    <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit    standard ända sedan 1500-talet.</p> 
 
    </div> 
 
    <div class="second"> 
 
    <div class="second-a"> 
 
     <h4>Feature1</h4> 
 
     <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit    standard ända sedan 1500-talet,</p> 
 
    </div> 
 
    <div class="second-b"> 
 
     <h4>Feature1</h4> 
 
     <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem   ipsum har   varit standard ända sedan 1500-talet,</p> 
 
    </div> 
 
    </div>