Vertical center when using flex

Question

I'm trying to center my text vertically in my divs, but I'm using display: flex so I can't use display: table.

What's the best way to vertically center the text here, ideally without adding lots of html elements (hoping to keep the 'thing' divs as clean as possible)?

Fiddle

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}

.thing {
  background: red;
  color: white;
  margin: 5px;
  text-align: center;
  display: table;
  flex: 1 0 30%;
  vertical-align: middle;
}

<div class="container">
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
</div>

`.thing { display: flex; align-items: center; }` will solve the problem. — tacoshy, Jun 19 '21 at 18:37
So it does! But oddly, then it pushes the text to the left horizontally, ignoring the 'text-align'? — user4893295, Jun 19 '21 at 18:44
in that case add also `justify-content: center;`. But as you see in my answer, it works fluently when you use flex-direction. — tacoshy, Jun 19 '21 at 18:45

score 2 · Answer 1 · answered Jun 19 '21 at 18:38

justify-content: center; and align-items: center; on flex containers will force children to vertically and horizontally center. Add these rules to .thing and you'll get your desired results.

.container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
}
.thing {
    background: red;
    color:white;
    margin: 5px;
    text-align: center;
    display: flex; /* create flex container */
    justify-content: center; /* center horizontally */
    align-items: center; /* center vertically */
    flex: 1 0 30%;
    vertical-align: middle;
}

<div class="container">
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
</div>

mrwolferinc · Answer 2 · 2021-06-19T19:08:16.237

1

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}

.thing {
  background: #f00;
  color: #fff;
  margin: 5px;
  text-align: center;
  display: table;
  flex: 1 0 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

<div class="container">
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
</div>

This is the most common method of centering text with CSS. To center the text inside each box, we make each containing box a flex container. Then set align-items to center to perform centering on the block axis, and justify-content to center to perform centering on the inline axis.

edited Jun 19 '21 at 19:08

answered Jun 19 '21 at 18:41

mrwolferinc

143
5

Ok i will change it – mrwolferinc Jun 19 '21 at 18:46
revoked the down-vote after the edit. However you still have a mistake in there. Its not `block-axis` and `inline-axis`. Those terms makes also no sense at all. Its `main-axis` (justify-content) and `cross-axis` (align.-items). Those axis depend on the flex-direction. The main-axis is always the same direction as the flex-direction. – tacoshy Jun 19 '21 at 21:24

score 0 · Accepted Answer · answered Jun 19 '21 at 18:41

Simply add .thing { display: flex; flex-direction: column; justif-content: center; } to the CSS. flex-direction: column; will make sure that the normal block-level element behavior is maintained. justify-content: center; aligns the items at the cenetr of the main-axis (in this case the vertical axis).

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}

.thing {
  background: red;
  color: white;
  margin: 5px;
  text-align: center;
  flex: 1 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="container">
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
</div>

Vertical center when using flex

3 Answers3