Using the CSS display property, you can easily align elements for a well-structured layout. The display: table and display: table-cell properties help to center a div horizontally using CSS, making elements behave like table cells. This approach is particularly useful for inline and inline-block elements such as <span>, <img>, or <div>. In this blog, you will learn about the CSS table layout and also the CSS display property with examples.
Table of Contents:
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 to use display: table Method to 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 elements to display: table and display: table-cell to make 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 a table cell.
Learn Web Development and Launch Your Tech Career
Top Web Development Courses to Kickstart Your Coding Journey
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.
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 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.
Alternative Methods to Horizontally Center the Element
Discover the foundational topics of HTML programming in the articles below.-
Bootstrap Interview Questions – Explore common Bootstrap interview questions explained in this blog.
What Does Enctypemultipart Form Data Mean In An HTML Form – This blog clarifies the meaning and use of enctype=”multipart/form-data” in HTML forms.
How To Vertically Align Text Next To An Image Using CSS – Discover how to vertically align text beside an image using CSS in this blog.
Regex To Match Open HTML Tags Except Self Contained XHTML Tags – Learn to craft regex patterns to match open HTML tags while excluding self-contained ones in this blog.
Why Margin Top Does Not Work In CSS – This blog investigates why margin-top sometimes doesn’t work in CSS layouts.
How To Copy Array By Value In JavaScript – Find out how to copy an array by value in JavaScript with examples in this blog.
CSS Margin Auto To Horizontally Center Element – See how to use CSS margin: auto for horizontal centering in this blog.
Using Onclick In HTML A Bad Practice – Understand the drawbacks of using inline onclick handlers in HTML through this blog.
Parsing HTML XML with Regular Expressions – Explore the challenges and solutions for parsing HTML/XML with regular expressions in this blog.
HTML Links – This blog guides you through creating and managing HTML links effectively.
CSS display: table Method to Center the Element Horizontally – FAQs
Q1. How do you use CSS center element techniques to align content horizontally?
You can use text-align: center;, margin: auto;, or display: flex; justify-content: center; to center elements horizontally in CSS.
Q2. How do you center div horizontally using CSS for a responsive layout?
Apply margin: 0 auto; with a defined width or use display: flex; justify-content: center; to center a div horizontally.
Q3. How do you center an element horizontally in CSS Grid?
Use display: grid; place-items: center; or justify-content: center; to align elements within a grid container.
Q4. How do I make a horizontal table in CSS using CSS table layout?
Set display: table; and use table-layout: fixed; or white-space: nowrap; to create a structured horizontal table layout.
Q5. How do I center a table vertically and horizontally in CSS using CSS display property?
Use display: flex; align-items: center; justify-content: center; or display: grid; place-items: center; to position the table properly.