Center p vertically and horizontally in flex item

Question

I want to center my text inside the flex items horizontally and vertically. I've looked around everywhere and tried a lot of things but so far nothing seems to work...

Could I nest another flexbox-container inside the existing one?

html, body {
  height: 100%;
  margin: 0;
}
.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.page1 {
  flex-grow: 1;
  min-height: 100%;
  background: lightblue;
}
#text1 {
  font-size: 160%;
  color: white;
  font-family: roboto, sans-serif;
}
.page2 {
  flex-grow: 1;
  min-height: 100%;
  background: cyan;
}
.page3 {
  flex-grow: 1;
  min-height: 100%;
  background: lightgreen;
}
.page3 {
  flex-grow: 1;
  min-height: 100%;
  background: lightgreen;
}

<div class="flex-container">
  <div class="page1">
    <p id="text1">blabla bla blablabla.</p>
  </div>
  <div class="page2"></div>
  <div class="page3"></div>
</div>

Yes, you can nest flex containers. http://stackoverflow.com/a/33049198/3597276 — Michael Benjamin, May 15 '16 at 12:16

score 3 · Accepted Answer · answered May 15 '16 at 12:11

Yes, make the flex-items also flex-containers as seen below. I also added margin: auto to #text1 to center it.

html, body {
  height: 100%;
  margin: 0;
}

.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page1 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 100%;
  background: lightblue;
}

#text1 {
  margin: auto;
  font-size: 160%;
  color: white;
  font-family: roboto, sans-serif;
}

.page2 {
  flex-grow: 1;
  min-height: 100%;
  background: cyan;
}

.page3 {
  flex-grow: 1;
  min-height: 100%;
  background: lightgreen;
}

.page3 {
  flex-grow: 1;
  min-height: 100%;
  background: lightgreen;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Portfolio </title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>

    <div class="flex-container">

      <div class="page1">
        <p id="text1"> blabla bla blablabla. </p>
      </div>


      <div class="page2">

      </div>

      <div class="page3">

      </div>

    </div>



  </body>
</html>

Thanks for your help m8. The solution is so simple but I just couldn't figure it out...#Ineedabreak — Unknown User, May 15 '16 at 14:00

Center p vertically and horizontally in flex item

1 Answers1