Centre dedans, dans flexbox fullscreen

Question

Im essayant d'obtenir le texte au milieu des flexboxes ainsi la grande boîte h4 et p est centrée à sa boîte, aussi bien que le texte dans les deux plus petites boîtes sont au milieu de leur des boites. Génial pour toute aide.

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

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

Assurez-vous également votre .first, .second-a & .second-b et appliquer la propriété d'alignement flex dans ces derniers aussi bien. Comme:

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

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

Jetez un oeil à l'extrait ci-dessous:

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>

Hope this helps!

Answer 2

Ajouter text-align: center;-.equal-height-container > div

Où > signifie que l'enfant immédiat

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>