Center vertically and horizontally

• November 14 2018
• 1 min. read

I was working on typesetting poems when I thought what it would take to center a piece of content both vertically and horizontally?

For image and smaller blocks of text like poems, I choose to work with flexbox as it provides, in my opinion, the simplest way to center content on both axes without scripting.

The code looks like this:

.container {
  height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

Some caveats:

• You must set an explicit height for the container, in this case, 100vh. Otherwise, there is no height to center to
• Because we're centering all the content it may be a good idea to create an inner container or paragraphs and other individual elements may be centered and cause unexpected results.

You can see working examples of this in my poema 6 and poema 19 demos. An editable example of Poema 6 is in Codepen.

Edit on Github