Flexbox item vertically centered while fixing another item to bottom left corner

Question

How can I fix the meta class to the bottom left corner of the flex container while keeping the heading element h1 vertically centered?

.container {
  height: 200px;
  background: red;
  display: flex;
  align-items: center;
}

<div class="container">
  <h1>Hello, world!</h1>
  <div class="meta">intro</div>
</div>

score 1 · Accepted Answer · answered Aug 07 '16 at 20:17

Take it out of flow and position it relatively to the container.

.container {
  height: 200px;
  background: red;
  display: flex;
  align-items: center;
  position: relative;
}
.meta {
  position: absolute;
  bottom: 0;
  left: 0;
}

<div class="container">
  <h1>Hello, world!</h1>
  <div class="meta">intro</div>
</div>

score 1 · Answer 2 · edited May 23 '17 at 12:22

1

Switch to flex-direction: column
Apply justify-content: space-between
Insert an invisible "spacer" item to balance out both ends

.container {
  height: 200px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.invisible { visibility: hidden; }

<div class="container">
  <div class="invisible">intro</div>
  <h1>Hello, world!</h1>
  <div class="meta">intro</div>
</div>

Note that flex alignment properties work by distributing available space in the container. This means that justify-content: space-between can precisely center the middle item (h1) only if both adjacent items are equal height. For more details see Box #71 here.

edited May 23 '17 at 12:22

Community

1
1

answered Aug 07 '16 at 20:31

Michael Benjamin

346,931
104
581
701

1

A less obtrusive way to balance could be choosing a `line-height` or `height` for `.meta` and inserting a `.container::before` pseudo-element with the same value. – Oriol Aug 07 '16 at 20:42
@Oriol, yes, much cleaner. And solves the problem with semantics. Thanks. – Michael Benjamin Aug 07 '16 at 20:53

Flexbox item vertically centered while fixing another item to bottom left corner

2 Answers2