0

In my application the number of items in a flex container is variable, and I want them to be both vertically and horizontally centred. I'm doing this by using justify-content for horizontal centring, and align-content for vertical centring.

However, reading from CSS Tricks' almanac states the following:

Note, this property has no effect when the flexbox has only a single line.

This becomes quickly apparent in my application. While there aren't enough items to wrap onto another line, vertical centring from align-content doesn't work at all.

As soon as a second line of content appears, align-content kicks in and works as expected.

I'm sure there's a reason for this behaviour, however in my case the result is an inconsistent user experience.

I know that I can achieve vertical centring by other means, for instance by wrapping the entire container in another flexbox, or a table, and applying vertical centring there. However, I feel like there should be a better way?

Is there some other flexbox option I'm missing that would solve this problem without introducing more HTML elements? If so, what is that option? :P

Bilal Akil
  • 4,716
  • 5
  • 32
  • 52
  • Use `align-items` instead of `align-content` might help ... still, need to know which flex direction you use and so on... – Asons Apr 21 '17 at 09:33
  • Thanks for all the `align-items` references. It didn't solve the problem on its own (because the behaviour is quite different to `align-content` when you have multiple lines of content), however I found that combining both `align-items` and `align-content` did. I will write an answer with more details (and examples) soon. – Bilal Akil Apr 21 '17 at 12:25
  • You need to use both, `align-content` and `align-items`. It's explained in the duplicate. – Michael Benjamin Apr 21 '17 at 13:26
  • 1
    @Michael_B I suggest you close it as a dupe, since I can't see how anyone can explain that any better than you already did :) – Asons Apr 22 '17 at 09:10

2 Answers2

1

Based on the given facts, you should use align-items instead of align-content

Notes:

Column-based

.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;           /*  center vertical    */
  align-items: center;               /*  center horizontal  */
  height: 250px;
  border: 1px solid gray
}

.flex * {
  margin-bottom: 0;         /* removed margin at one side since they 
                               doesn't collapse when flexbox is used */
}
<div class="flex">

  <h1>Hey</h1>
  <p>How are</p>
  <p>we doing</p>

</div>

Row-based

.flex {
  display: flex;
  justify-content: center;           /*  center horizontal  */
  align-items: center;               /*  center vertical    */
  height: 250px;
  border: 1px solid gray
}
<div class="flex">

  <h1>Hey </h1>
  <p>How are </p>
  <p>we doing</p>

</div>
Community
  • 1
  • 1
Asons
  • 84,923
  • 12
  • 110
  • 165
0

Using align-items & justify-content together will vertically and horizontally center a single item:

align-items:center; justify-content:center

See fiddle: https://jsfiddle.net/p8zk4bkk/

henrycarteruk
  • 12,708
  • 2
  • 36
  • 40
ceindeg
  • 434
  • 5
  • 9