CSS display: table Method to Center the Element Horizontally

You can horizontally center the element using the display: table property. The properties such as display: table and display:table-cell are used for this purpose and to make elements behave like table cells in HTML. This is suitable for inline and inline-block elements such as <span>, <img>, or <div>.

What is display: table in CSS?

The CSS property display: table makes the element behave like a table. You can use this method in order to arrange the contents in rows and columns like a table. You can combine it with display: table-row for rows and display: table-cell for cells to design your layout.

How Do display: table Horizontally Center an Element?

The display: table and display: table-cell can be used for horizontally centering an element. You can set the parent and child element to the display: table and display: table-cell for making the container behave as a table and table-cell. You can set the child element to text-align: center for centering horizontally.

Example 1: Centering Div Using display: table

You can use display: table and the child element display: table-cell to center the child element horizontally.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example Table Display</title>
  <style>
    .box {
      display: table;
      width: 90%;
      background-color: gray;
      padding: 25px;
    }
    .center {
      display: table-cell;
      text-align: center; 
      background-color: lightblue;
      padding: 25px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="center">
      Intellipaat!
    </div>
  </div>
</body>
</html>

Output:

Explanation: This code centers the div using a CSS property called display: table. It can be styled by making the container act as the table with properties such as width: 50% and padding: 20px. The centered element behaves as the table cell.

Learn Web Development and Launch Your Tech Career

Top Web Development Courses to Kickstart Your Coding Journey

Explore Program

Example 2: Centering Image Using display: table

You can center the image horizontally using CSS’s display: table and display: table-cell properties.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center Image Using Table Display</title>
  <style>
    .box {
      display: table;
      width: 70%;
      height: 100px;
      margin: auto;
      background-color: white;
      padding: 20px;
      border: 2px solid whitesmoke;
    }
    .center {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    img {
      max-width: 80%;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="center">
      <img src="https://intellipaat.com/blog/wp-content/uploads/2025/02/What-is-HTML-Feature-Image.jpg" alt="Placeholder Image">
    </div>
  </div>
</body>
</html>

Output:

Explanation: The image got centered using display: table, table-cell, and text-align: center. The image gets further definition from the height and width properties.

Example 3: Centering Button Using display: table

You can center the button horizontally using CSS’s display: table and display: table-cell properties.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center Button Using Table Display</title>
  <style>
    .box {
      display: table;
      width: 60%;
      height: 250px;
      margin: auto;
      background-color: white;
      padding: 20px;
      border: 2px solid whitesmoke;
    }
    .center {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    .button {
      padding: 15px 25px;
      font-size: 18px;
      background-color: pink;
      color: black;
      border: none;
      cursor: pointer;
      border-radius: 6px;
    }
    .button:hover {
      background-color: palevioletred;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="center">
      <button class="button">Intellipaat</button>
    </div>
  </div>
</body>
</html>

Output:

Explanation: The code contains properties like display: table, table-cell, and text-align: center for centering the button. Followed by adding CSS properties to style them.

Conclusion

The CSS property display: table is used for centering the element. The parent is set to the display: table, and display: table-cell is set for the child element. This makes the elements treated as a table and a table cell. This method is well-known for centering the inline and inline-block elements such as div, image, button, etc.