W3docs
en
Log in

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 very easy if you follow the steps.

Tags

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 <span class="property"> XFI5 </span> tags and write some content in them.
  • Create a <span class="property"> XFI6 </span> tag and add content to it.

How to create HTML <h2>, <h3> and <div> tags inside an HTML <body> tag?

<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 <span class="property">div</span> using the width property.
  • Use the margin property which creates space around the element. Set the "auto" value for centering the <span class="property"> XFI7 </span>. (Note: margin: 0 auto is a common convention that explicitly sets top and bottom margins to 0 while centering horizontally.)
  • 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 <span class="property"> XFI8 </span> and <span class="property"> XFI9 </span> tags.
  • Use the text-align property with its "center" value for the <span class="property"> XFI10 </span> and <span class="property"> XFI11 </span> tags for aligning the text to the center.

How to style <h2>, <h3> and <div> tags using CSS width, margin, border, text-align and color properties?

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:

An example of how to horizontally center a div with CSS

<!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>
Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> W3docs Horizontally centered div <br> <div>W3docs is a web developer information website, with tutorials and references relating to web development.</div> </div> Let’s see another example.

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

An example of how to horizontally center a div using CSS position property with the "absolute" value

<!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>
Try it Yourself »

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.

Info

Transforms can be applied to any element.

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

Let’s see one more example.

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

An example of how to horizontally center a div using CSS display property with the flex value, align-items property with the center value and justify-content property with the "center" value

<!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>
Try it Yourself »

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.