Centering Things in CSS Using Flexbox

Published on May 2, 2020


Centering Things in CSS Using Flexbox

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Centering of elements on a page, especially vertical centering, has been notoriously difficult to do in the past with CSS and we’ve had to resolve to a number of hacks. Thankfully though, Flexbox makes it all easier, and we can now instead focus our designing energy towards higher level problems.

The following is a very simple guide on centering elements using Flexbox.

Horizontal Centering

Let’s start with a div that contains two paragraphs that we want to center horizontally on the same axis. It’s as easy as using the justify-content property with a value of center on the container:

Example imagearrr!

Example image 2 yeehaw!

<div class="box flex">
    <img src="/images/pirate.svg" width="75">
    <img src="/images/cowboy.svg" width="75">
.box.flex {
  display: flex;
  justify-content: center;

.box {
  padding: .5rem;
  height: 300px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.03);
  border-radius: 4px;

  color: #84613D;
  font-family: "Lucida Console", Monaco, monospace;
  background: #FDF9EA;
  border-bottom: 1px solid #F9F2D6;
  border-right: 1px solid #F9F2D6;

.box p {
  max-width: 125px;
  text-align: center;
  background: rgba(255,255,255,0.5);
  margin: .25rem;
  padding: .25rem;

Vertical Centering

The power of Flexbox really shines when we also need to center elements vertically. Here’s our example, but with the flex items also centered vertically:

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

Example image arrr!

Example image yeehaw!

If you just want specific flex items to be centered vertically, you can set align-self on the items instead:

.flex p:last-child {
  align-self: center;

Example image arrr!

Example image yeehaw!

Vertical Centering On Whole Page

If you want to put an element at the dead center of a page, it can be a little bit more tricky because flex items will only center vertically according to the height of their container. That means that the container itself needs to be the same height as the page itself. That easy-enough to do using viewport units, where 100vh is 100% of the height of the viewport.

Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dead center!</title>
      body {
        margin: 0;

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

        height: 100vh;

    <div class="center-me">
      <p>😇 Bonjour center!</p>


Notice also that we make sure to reset the page’s margin to 0, as otherwise you’d end up with a little bit of a scroll.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

About the authors
Default avatar


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel