How to Horizontally Center Contents Within a Div

There are several ways that can be used to horizontally align the contents of the HTML <div> element to the center. To achieve your desired result, you need to use some CSS properties, which we’ll demonstrate in this snippet.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Solutions with CSS

You can use the CSS justify-content property, which will align the items when they do not use all the available space horizontally.

In the example below, we set the justify-content property to "center" and add the display property specified as "flex". We set the text-align property to “center” and specify the border, height, and padding of our <div>.

Example of horizontally centering the content of a <div> with the justify-content property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid lightblue;
        height: 100px;
        padding: 10px 0;
        display: flex;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <h1>Horizontally aligned element</h1>
    <div>
      A horizontally aligned text with the CSS justify-content property.
    </div>
  </body>
</html>

Result

A horizontally aligned text with the CSS justify-content property.

In the next example, we align the text of the <div> to the center with the CSS text-align property set to its "center" value. Also, we specify padding-top.

Example of horizontally centering the content of a <div> with the text-align property:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     div {
       border: 3px solid lightblue;
       height: 80px;
       text-align: center;
       padding-top:10px;
     }
   </style>
 </head>
 <body>
   <h1>Horizontally aligned element</h1>
   <div>
    A horizontally aligned text with the CSS text-align property
   </div>
 </body>
</html>
In the following example, we align to the center the <p> and <span> elements that are placed within a <div> .

Example of horizontally centering the <p> and <span> elements of a <div>:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     div {
       border: 3px solid lightblue;
       height: 80px;
       padding-top: 10px;
     }
     p {
       margin: 0 auto 30px;
       border: 1px solid lightgreen;
       width: 250px;
     }
     span {
       display: block;
       margin: 0 auto;
       border: 1px solid green;
       max-width: 200px;
     }
   </style>
 </head>
 <body>
   <h1>Horizontally aligned elements</h1>
   <div>
     <p>A horizontally aligned text.</p>
     <span>A horizontally aligned text.</span>
   </div>
 </body>
</html>

In the end, we want to present a way of centering the content within a <div> both horizontally and vertically. Here, besides the justify-content and display (with "flex") properties, you need the align-items property which will set the vertical alignment to the center.

Example of centering the content of a <div> both horizontally and vertically:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid lightblue;
        height: 100px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <h1>Horizontally and vertically aligned element</h1>
    <div>
      Both horizontally and vertically aligned text with the CSS justify-content property.
    </div>
  </body>
</html>