Vertical centering and vertical alignment in CSS has always given web developers a headache. What makes the problem worse is that where there should be a simple answer, there simply isn’t. CSS rules such as vertical-align doesn’t influence block elements and tends to be reserved only for images.
Other options include using line-height to vertically align text, and using position to vertically align block elements – even then you have to use a negative margin. The problem comes when you don’t know how big the centered block element needs to be, especially with ever changing device sizes.
Enter flexbox.
Flexbox gives us a very simple sollution to aligning center, both horizontal center and vertical center. Flexbox gives us 3 rules to play around with – align-items, align-self, justify-content.
CSS Absolute Center
I’m some text in a centered block element.
I’m centered both horizontally and vertically
With very little code we’ve managed to align our block element horizontally and vertically in the center.
[css]<br />
.container {<br />
align-items: center;<br />
display: flex;<br />
justify-content: center;<br />
}<br />
[/css]
CSS Align Bottom
Another common question is about aligning an element at the bottom of the container, or at the bottom of a page. Flexbox makes aligning bottom very easy in CSS.
CSS Align Bottom
I’m some text in a centered block element at the bottom of its container.
I’m centered horizontally and aligned at the bottom, regardless of the container height.
Again, very little code, nicely done.
[css]<br />
.container {<br />
align-items: flex-end;<br />
display: flex;<br />
justify-content: center;<br />
}<br />
[/css]
CSS Align Left and Right
With our element aligned to the bottom we can specify both left and right alignment without the need for floating.
CSS Align Bottom Left
I’m some text in a left block element at the bottom of its container.
I’m left aligned and aligned at the bottom, regardless of the container height or width.
CSS Align Bottom Right
I’m some text in a right block element at the bottom of its container.
I’m right aligned and aligned at the bottom, regardless of the container height or width.
The code for this is yet again, very simple.
[css]<br />
.container {<br />
align-items: flex-end;<br />
display: flex;<br />
justify-content: space-between;<br />
}<br />
[/css]
Flexbox 2 Split Columns – 100% Height
If we take our previous example, we can make it extend vertically 100% with some very simple code.
CSS Align Left
I’m some text in a left block element at the bottom of its container.
I’m left aligned and aligned at the bottom, regardless of the container height or width.
CSS Align Right
I’m some text in a right block element at the bottom of its container.
I’m right aligned and aligned at the bottom, regardless of the container height or width.
Now with flexbox it’s much easier to create a simple 2, 3, 4 column layout, and the best thing is, you can reorder them using CSS.
[css]<br />
.container {<br />
align-items: stretch;<br />
display: flex;<br />
justify-content: space-between;<br />
}<br />
[/css]
CSS Full Column, and Bottom Align
Now lets make one column full height, whilst the other is aligned to the bottom.
CSS Align Left
I’m some text in a left block element filling the left side of its container.
I’m left aligned and aligned at the top.
CSS Align Bottom Right
I’m some text in a right block element at the bottom of its container.
I’m right aligned and aligned at the bottom, regardless of the container height or width.
This example could be used on a full layout with a sidebar and chat box.
[css]<br />
.container {<br />
display: flex;<br />
justify-content: space-between;<br />
}</p>
<p>.left {<br />
align-self: stretch;<br />
}</p>
<p>.right {<br />
align-self: flex-end;<br />
}<br />
[/css]
Tiered CSS Layout
If we take our previous example, we can make it extend vertically 100% with some very simple code.
CSS Align Left
I’m some text in a left block element filling the left side of its container.
I’m left aligned and aligned at the top.
CSS Align Center
I’m some text in a center block element in the center of its container.
CSS Align Bottom Right
I’m some text in a right block element at the bottom of its container.
I’m right aligned and aligned at the bottom, regardless of the container height or width.
This example shows how easy it is to align each element exactly where you need it, whether it’s left aligned, vertically center aligned, or bottom aligned.
[css]<br />
.container {<br />
display: flex;<br />
justify-content: space-between;<br />
}</p>
<p>.left {<br />
align-self: stretch;<br />
}</p>
<p>.center {<br />
align-self: center;<br />
}</p>
<p>.right {<br />
align-self: flex-end;<br />
}<br />
[/css]
Conclusion
As you can see, flexbox gives web developers much greater control over aligning block elements. You can easily align elements top, bottom, center, left, right with very little CSS.
If you want to create backwards compatible flexbox designs, use the standard browser prefixes to enable it (-moz-, -webkit-, -ms-).
Subscribe for Updates
Get notified about my latest content first and receive invitations for subscriber only competitions.
Hi,
How would you center the content inside a flexbox item? Both axis.
Do you use CSS grid? I intend to use the grid for the layout and flexbox for the content.
I have a simple flexbox layout, split screen… but when I add more content to the right or left side… I seem to get to the end…the 2 sides does not stretch with the amount of content so the content runs out of the flexbox
Have you defined a height or changed word-wrap globally?