Skip to main content

Centering Content - Flexbox

Lee Cooper

Centering Content with Flexbox

Horizontal Centering​

Case: Grace, the UX designer, ran a usability lab for the articles page. Based on user feedback, she has asked you to center the h1 article title on the articles page so that it is displayed more prominently to readers.

Task: Center the article title horizontally using flexbox.

CSS:

.article-title {
  display: flex;
  justify-content: center;
}

Tailwind:

<div class="flex justify-center"></div>

Vertical Centering​

Scenario: Dembe, the tech lead, identified that the icon and the navigation items are not vertically centered in the nav bar. One of the stakeholders has a keen eye for detail, and Dembe knows that it will be flagged in the review if it's not fixed.

He's asked you to provide a fix before the review later today.

Task: Center the navigation item text and icon vertically within the nav bar.

CSS:

.nav-item {
  display: flex;
  align-items: center;
}

Tailwind:

<div class="flex align-items"></div>

Horizontal + Vertical Centering​

Scenario: Arjuna, one of the key stakeholders, has asked that the footer text be centered.

Being proactive the dev that you are, you reach out to ask it he's asking for horizontal or vertical centering.

He says, "Both."

Task: Center footer text horizontally and vertically in the footer

CSS:

.someClass {
  display: flex;
  justify-content: center;
  align-items: center;
}

Tailwind:

<div class="flex items-center justify-center"></div>