How to vertically align and stretch content using CSS flexbox

Question

Using CSS flexbox, how can I simultaneously vertically center the content of all divs in a row while keeping the same height on all of them without using the css height attribute?

HTML

<!DOCTYPE html>
<html>
  <body>
    <div class="Grid">
      <div class="Grid-cell">
        1<br>
        1<br>
        1<br>
        1<br>
      </div>
      <div class="Grid-cell">2</div>
      <div class="Grid-cell">
        3<br>
        3<br>
      </div>
    </div>
  </body>
</html>

CSS:

.Grid {
  display: flex;
  justify-content: center; 
  align-items: center;
}

.Grid-cell {
  flex: 1;
  text-align: center;
}

(see http://jsbin.com/efaCEVa/1/edit)

possible duplicate of [vertically centre items with flexbox](http://stackoverflow.com/questions/15726740/vertically-centre-items-with-flexbox) — cimmanon, Sep 28 '13 at 13:00
this is not a duplicate, see this example http://jsbin.com/efaCEVa/1/edit — Stephen, Sep 28 '13 at 18:40
https://stackoverflow.com/questions/28929635/center-div-vertically-in-flexbox-container-with-stretch-alignment — Ben, Jun 21 '17 at 23:20
This question should be closed unless the OP wishes to copy their content here to Stack Overflow... — Heretic Monkey, Apr 27 '20 at 13:13
@HereticMonkey good point, I went ahead and added it for them :) — Ben, Apr 30 '20 at 15:01
@Ben... and relicensed their content under CC-BY-SA from MIT, but yeah... — Heretic Monkey, Apr 30 '20 at 15:11

score 60 · Accepted Answer · edited Apr 04 '23 at 11:48

60

.outer {
  align-items: stretch;
  display: flex;
}

.inner {
  align-items: center;
  display: flex;
}

<div class='outer'>
  <div class='inner'>A</div>
  <div class='inner'>B</div>
  <div class='inner'>C</div>
</div>

edited Apr 04 '23 at 11:48

tacoshy

10,642
5
17
34

answered Jun 21 '17 at 23:58

Ben

54,723
49
178
224

The perfect solution, and works in IE as well. Thanks. – HartleySan Apr 17 '19 at 20:15

score 3 · Answer 2 · edited Jul 21 '23 at 11:44

3

  .item-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  .item {
    width: 400px;
    display: flex;
  }

edited Jul 21 '23 at 11:44

Community

1
1

answered Jul 25 '16 at 18:38

GN.

8,672
10
61
126

score 0 · Answer 3 · answered May 26 '21 at 17:51

If you set flex: 1 on the child, it will stretch to fill the space.

Then you can align-items: center on the child container.

.container {
  display: flex;
}

.item {
  flex: 1;
  display: flex;
  align-items: center;
  width: 200px;
  background-color: cadetblue;
  color: white;
  padding: 1rem;
  margin: 1rem;
}

.content {
  padding: 1rem;
  border: 2px solid lightcoral;
}

    <div class="container">
        <div class="item">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Pulvinar neque laoreet suspendisse interdum consectetur libero.
                Diam sit amet nisl suscipit adipiscing bibendum est.
            </div>
        </div>
        <div class="item">
            <div class="content">
                Duis tristique sollicitudin nibh sit amet. Platea dictumst
                vestibulum rhoncus est pellentesque.
            </div>
        </div>
        <div class="item">
            <div class="content">
                Aliquam vestibulum morbi blandit cursus
            </div>
        </div>
    </div>

score -7 · Answer 4 · answered Sep 29 '13 at 12:14

-7

There is no reason to do this with Flexbox. The table/table-cell properties have been able to do this for a long time:

http://cssdeck.com/labs/qsirepkh

ul {
  display: table; /* optional */
}

li {
  display: table-cell;
  vertical-align: middle;
}

This is what it looks like with Flexbox:

http://codepen.io/cimmanon/pen/BfDAk

ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

answered Sep 29 '13 at 12:14

cimmanon

67,211
17
165
171

11

I want to do it in flexbox because I also want the contents to divide evenly throughout the width of the page – Stephen Sep 30 '13 at 02:18
16

It is nice to have both possibilities. I would remove the first sentence of the answer : "There is no reason to do this with Flexbox.". Some of us have jumped the full-fledged flexbox approach to containers. – Christian Bonato Sep 29 '14 at 17:20
5

Much much better to take the time to learn flexbox rather than using old techniques like this. Also, the only reason that flexbox comparison is long is because cimmanon wrote out the browser prefixes, css preprocessors take care of this. – captDaylight Oct 29 '15 at 16:49
2

@captDaylight I generated this with a CSS preprocessor. There's no benefit to moving to the shiny when the old techniques are perfectly suited to the task, have wider browser support (and less bugs), and end up amounting to *less* code in the end. – cimmanon Oct 29 '15 at 17:35
2

@cimmanon then why show the code postprocessed? it just makes it look more intimidating, no one would ever write all of that out. Your solution works perfectly, I agree, but all I'm suggesting is to learn flexbox which is incredibly powerful and solves so many situations that require roundabout css hacks. – captDaylight Oct 29 '15 at 20:20
1

Because this is not a Sass question. Ultimately, it has to be served as CSS no matter what. Hiding them behind Sass mixins does not help, especially when one needs to support older Flexbox implementations that do not have the same property names or values. – cimmanon Oct 29 '15 at 20:30
2

Tables perform slower than flexbox. – Steven Vachon Feb 24 '16 at 08:21

How to vertically align and stretch content using CSS flexbox

4 Answers4

Linked