X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

How to Center the Content Vertically and Horizontally with Flexbox

Developers can assure that centering content is one of the hardest things to do in CSS layout. CSS Flexbox now allows having more control over HTML element alignment, including centering everything you want.

Now we show how simple to center content vertically and horizontally with the steps below.

Let’s work with this example:

1. Create HTML

  • Create <div> element with ID name "big-box" and another <div> with a name of "small-box".
<h2>Centering Content</h2>
<div id="big-box">
  <div id="small-box"></div>
</div>

2. Create CSS

Here we have two div elements. Our task is to center the "small-box" id inside the "bix-box" id.

  • First, use the width property to set the width for two boxes. Change it according to what size you need.
  • Then set the height of the boxes using the height property.
  • Set your preferred colors for the divs using the background-color property.
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
}
#small-box{
width: 100px;
height: 100px;
background-color: #8ebf42;
}
  • The next step is to specify the layout by setting the display property. To use Flexbox, set the display: flex.
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
display: -webkit-flex;
}

Flex value should be used with -webkit- extension for Safari, Google Chrome, and Opera.

Nothing changes when you run this code. Follow up on the next steps!

  • Add the align-items property. The align-items property specifies the vertical alignment of contents inside the flex container. We should set align-items into "center" value which vertically centers the content.
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
}

So, now run the code and see that "small-box" centered on the vertical axis.

Now that we center our div element vertically, it is time to center it horizontally.

  • We need the justify-content flexbox CSS property which aligns the content horizontally. We set the justify-content into "center" and run our code.
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
align-items: center;
justify-content: center;
-webkit-align-items: center;
}

So we have reached our goal!

See the final outcome of our code.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #big-box{
      width: 200px;
      height: 200px;
      background-color: #666666;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-align-items: center;
      }
      #small-box{
      width: 100px;
      height: 100px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Centering Content</h2>
    <div id="big-box">
      <div id="small-box"></div>
    </div>
  </body>
</html>

The -Webkit- for Safari, Google Chrome, and Opera (newer versions) is used with the align-items property.

Let’s see another example:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flexbox-container {
      background: #cccccc;
      display: flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      height: auto;
      margin: 0;
      min-height: 500px;
      }
      .flexbox-item {
      max-height: 50%;
      background: #666666;
      font-size: 15px;
      }
      .fixed {
      flex: none;
      max-width: 50%;
      }
      .box {
      width: 100%;
      padding: 1em;
      background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Centering Content</h2>
    <div class="flexbox-container">
      <div class="flexbox-item fixed">
        <div class="box">
          <h2>Centered by Flexbox</h2>
          <p contenteditable="true">This box is both centered vertically and horizontally. </p>
        </div>
      </div>
    </div>
  </body>
</html>

The box will remain centered even if the text changes to make it wider or taller.


Do you find this helpful?

Related articles