How to Horizontally Center a Div with CSS

Sometimes you need to center your <div> horizontally, but you don’t know-how. This tutorial is for you. It’s straightforward if you follow the steps described below.

Let’s see an example and discuss each part of the code.

Create HTML

  • Place <h2> and <h3> tags and write some content in them.
  • Create a <div> tag and add content to it.
<body>
  <h2>W3docs</h2>
  <h3>Horizontally centered div</h3>
  <div>
    W3docs is a web developer information website, with tutorials and references relating to web development.
  </div>
</body>

Add CSS

  • Set the width of the div using the width property.
  • Use the margin property which creates space around the element. Set the "auto" value for centering the <div>.
  • Set the border for the <div> by using the border property and set the values of border-width, border-style, and border-color properties.
  • Choose colors for the <h2> and <h3> tags.
  • Use the text-align property with its "center" value for the <h2> and <h3> tags for aligning the text to the center.
div {
  width: 300px;
  margin: auto;
  border: 3px solid #4287f5;
}

h2,
h3 {
  text-align: center;
  color: #4287f5;
}

Here is the result of our code.

Example of centering a <div> horizontally:

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document</title>
    <style>
      div {
        width: 300px;
        margin: auto;
        border: 3px solid #4287f5;
      }
      h2,
      h3 {
        text-align: center;
        color: #4287f5;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <h3>Horizontally centered div</h3>
    <div>
      W3docs is a web developer information website, with tutorials and references relating to web development.
    </div>
  </body>
</html>

Result

W3docs

Horizontally centered div

W3docs is a web developer information website, with tutorials and references relating to web development.

Let’s see another example.

Example of centering a <div> horizontally with the CSS position property:

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document</title>
    <style>
      div {
        background-color: #8ebf42;
        color: #ffffff;
        width: 300px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        line-height: 30px;
      }
      h2,
      h3 {
        text-align: center;
        color: #4287f5;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <h3>Horizontally centered div</h3>
    <div>
      W3docs is a web developer information website, with tutorials and references relating to web development.
    </div>
  </body>
</html>

In the example above, we use the position property with the "absolute" value which means that elements are removed from the document flow and are positioned relative to the positioned ancestor element. We use the transform property which specifies two-dimensional or three-dimensional transformation of the element.

Only the box model positioned elements can be transformed.

Also, we use the padding and line-height properties.

Let’s see one more example.

Example of centering a <div> horizontally with the CSS display property:

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document</title>
    <style>
      .purple-box {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .purple-square {
        background-color: #B10DC9;
        width: 300px;
        height: 300px;
      }
      h2,
      h3 {
        text-align: center;
        color: #4287f5;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <h3>Horizontally centered div</h3>
    <div class="purple-box">
      <div class="purple-square"></div>
    </div>
  </body>
</html>

In this example, we use the display property with the "flex" value to display an element as a block-level-flex container. We also use the align-items property with the "center" value which means that items are placed at the center of the container. Then, we add the justify-content property with the "center" value.