Center innerhalb, in Flexbox Vollbild

Question

Ich versuche, den Text in der Mitte der Flexboxen so die große Box h4 und p ist zentriert zu seiner Box, sowie der Text in den beiden kleineren Boxen sind in der Mitte ihrer Boxen. Großartig für jede Hilfe.

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

Verwenden align-items: center & justify-content: center.

Auch Ihre .first, .second-a & .second-b machen und die flexible Ausrichtung Eigenschaft in diese auch anzuwenden. Wie:

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

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

Werfen Sie einen Blick auf das Snippet unten:

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>

hoffe, das hilft!

Answer 2

hinzufügen text-align: center;-.equal-height-container > div

Wo > die sofortige Kind bedeutet

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>