How to Center the Content Vertically and Horizontally Using Flexbox

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

Below, we'll demonstrate how to easily center the content both vertically and horizontally.

Create HTML

Create a <div> element with an id "big-box" and then, place another <div> with an id "small-box" within the first one.

how to create an HTML <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>

Add CSS

Now, let's see how to center the "small-box" id inside the "bix-box" id with the following steps.

Set the width and height properties for the two boxes. Also, specify the background-color of them.
Set the display of the "big-box" to "flex" and add the align-items property to specify the vertical alignment of contents inside the flex container. Use also the -webkit- extension.
Set the justify-content property of the "big-box" to "center" to align the content horizontally.

How to style an HTML tag, using CSS width, height and background-color properties?

#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;
}

So we have reached our goal! See the outcome of our code.

Example of centering the content with Flexbox:

<!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>

Try it Yourself »

Result

<div class="demo mt-1 mb-8 px-2.5"> XFI4 <div id="small-box"> </div> </div> </div>

Info

The -Webkit- extension is used with the <kbd class="highlighted">align-items</kbd> property for Safari, Google Chrome, and Opera (newer versions).

Let’s see another example, where the box will remain centered even if the text changes to make it wider or taller.

Example of centering the content using Flexbox:

<!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>

Try it Yourself »