Center within, within flexbox fullscreen

Question

Im trying to get the text in the middle of the flexboxes so the big box h4 and p is centered to its box, as well as the text in the two smaller boxes are in the middle of their boxes. Greatful for every help.

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

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

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


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



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


.second-b {
 background-color: honeydew;
 flex: 1;
 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

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

Also make your .first, .second-a & .second-b and apply the flex alignment property in these as well. Like:

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

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

Have a look at the snippet below:

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

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

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


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



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


.second-b {
 background-color: honeydew;
 flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - 20px);
 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

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

Where > means the immediate child

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

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

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


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



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


.second-b {
 background-color: honeydew;
 flex: 1;
 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>