44

I'm trying to center the CONTENTS of a flexbox item while using justify-content:stretch; It appears that the old trick of using display:table-cell;vertical-align:middle; doesn't work in this situation. What does?

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

<div class="flex-container">
    <div class="flex-item">I want to be vertically centered! But I'm not.</div>
</div>

BEFORE YOU ANSWER: There seems to be a lot confusion about what I'm asking. I'm trying to center the CONTENTS of the flex-item. With justify-content:stretch, the height of the item will stretch to the full height of the container, but the contents of the item floats to the top (at least in Chrome).

"A picture is worth a thousand words." (A) is what I've already got. (B) is what I want. enter image description here

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
emersonthis
  • 32,822
  • 59
  • 210
  • 375

3 Answers3

99

It can be achieved by displaying each flex item as a flex container and then aligning the contents vertically by align-items property, as follows:

.flex-container {
  display:flex;
  align-items:center;
  height: 200px; /* for demo */
}

.flex-item {
  align-self:stretch;
  display:flex;
  align-items:center;
  background-color: gold; /* for demo */
}
<div class="flex-container">
    <div class="flex-item">
      I want to be vertically centered!
      <s>But I'm not.</s>
  </div>
</div>

As a side-note, if you omit the align-items:center; declaration of the .flex-container you can safely remove align-self:stretch; from flex items as well.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • I'm seeing the contents top-aligned in mobile safari. Is that a known issue? – emersonthis Jan 31 '15 at 20:27
  • @SDP Make sure you have included `-webkit-` prefix as well. The new syntax of flexbox is supported in iOS Safari 7.1-8.1 but only with `-webkit-` prefix, i,e, `display: -webkit-flex;` and `-webkit-align-items: center;`. For older versions, you have to use the [old flexbox syntax](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/) including `-webkit-` prefix. – Hashem Qolami Jan 31 '15 at 22:31
  • `stretch` is not a valid value for `justify-content`. Valid values are `flex-start | flex-end | center | space-between | space-around` – Kilmazing Sep 14 '15 at 19:35
  • 2
    By the way: The reason why this works is, that the text contained inside the `.flex-item` is considered an “anonymous inline box”. – I am not making this up, [see the W3C spec](https://www.w3.org/TR/CSS22/visuren.html#anonymous) and this [cool answer](https://stackoverflow.com/a/33049392/444255) – Frank N Feb 28 '19 at 14:23
0

I'm not sure if I am interpreting your request correctly, but I think you are trying to use "justify-content:stretch;" when you should be using flex-grow.

Im my sample I used flex:1 auto; which is just shorthand to set a couple of flex properties.

HTML:

<div class="flex-container">
    <div class="flex-item">I'm top dog!
    </div>
    <div class="flex-item flex-center">
        I want to be vertically centered! And I am!
    </div>
</div>

CSS:

*{
    box-sizing:border-box;
    padding:5px;
}
.flex-container {
    border: 1px solid;
    display:flex;
    align-items:center;
    height: 100px;
}
.flex-item {
    flex: 1 auto;
    border: 1px solid green;
    height:100%;
    display:flex;
    justify-content:center;
}
.flex-center {
    align-items: center;
}

http://jsfiddle.net/p28tjskq/

Flex property:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex

chris
  • 216
  • 1
  • 2
  • 7
0

The text of a div-box is an anonymous inline-node. If you want to center a text in your box, you can use:


    display: flex;
    align-items:center;

Make sure, that no align-self will destroy your results.

*{
    box-sizing:border-box;
    padding:5px;
}
.flex-container {
    border: 1px solid;
    display:flex;

    height: 200px;
}
.flex-item {
    flex: 1 auto;
    border: 1px solid green;
    align-self:stretch;
    display:flex;
    justify-content:center;
}
.flex-center {
    align-items: center;
}
.flex-center div {
  border: 1px solid blue;
}
<div class="flex-container">
    <div class="flex-item">I'm top dog!
    </div>
    <div class="flex-item flex-center">
        I want to be vertically centered! And I am!    
        <div style="align-self:start;">
          I want to be vertically centered too! But align-self broke it!
        </div>
        <span style="align-self:middle; color:red;">Hallo. I am a centered text. </span>
    </div>
</div>
padina
  • 77
  • 5