# How to Center a Div with CSS – 7 Different Ways
This article will demonstrate seven various approaches to vertical and horizontal content centering using HTML and CSS, given in chronological sequence from the traditional approaches (which we usually omit now) to the contemporary approaches.
1. ### Using Table
In the early days, before a straightforward method for centering elements existed, we relied on tables as a workaround to achieve both vertical and horizontal centering. Although this approach was far from ideal, it was the only available option back then.
The concept involved creating a table with a sole cell and applying vertical and horizontal centering to that particular cell.
```xml
```
```css
table {
width: 100%;
height: 100%;
}
td {
vertical-align: center;
text-align: center;
}
```
%[https://codepen.io/yatharthaa/pen/NWEYMeK]
1. ### Using position: relative, absolute, and offset values
One way to center a div is by utilizing the CSS position property. By setting the parent div to `position: relative` and the child div to `position: absolute`, along with appropriate offset values using top and left properties, we can achieve a centered effect.
```xml
```
```css
.parentContainer {
background: tomato;
height: 300px;
width: 300px;
position: relative;
}
.childContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
%[https://codepen.io/yatharthaa/pen/LYXdmJe]
1. ### Using Flexbox and justify-content, align-items
CSS Flexbox provides powerful alignment capabilities. By applying `display: flex` to the parent div and setting `justify-content: center` and `align-items: center`, we can easily center the child div both horizontally and vertically.
```xml
```
```css
.parentContainer {
background: tomato;
height: 300px;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
}
```
%[https://codepen.io/yatharthaa/pen/QWJmrYw]
1. ### Using Flexbox and justify-content, align-self
Similar to the previous method, we can use Flexbox and `justify-content: center` in the parent div. Additionally, setting `align-self: center` for the child div allows individual alignment control along the cross-axis.
```xml
```
```css
.parentContainer {
background: tomato;
height: 300px;
width: 300px;
display: flex;
justify-content: center;
}
.childContainer {
align-self: center;
}
```
%[https://codepen.io/yatharthaa/pen/NWEYMZP]
1. ### Using Flexbox and Margin: auto
Flexbox, combined with margin auto, offers an efficient way to center a div. By applying `display: flex` to the parent div and setting `margin: auto` for the child div, the remaining space is evenly distributed, resulting in a centered effect.
*Note: we can achieve the same result using* `display: grid` *and* `margin: auto` *as well*
```xml
```
```css
.parentContainer {
background: tomato;
height: 300px;
width: 300px;
display: flex;
}
.childContainer {
margin: auto;
}
```
%[https://codepen.io/yatharthaa/pen/oNQqyNM]
1. ### Using CSS Grid and place-items
CSS Grid offers the place-items property, which allows setting both align-items and justify-items in a single declaration. By applying `display: grid` to the parent div and setting `place-items: center`, we can conveniently center the child div.
*Except for Internet Explorer, All browser support* `place-items: center` *property*
```xml
```
```css
.parentContainer {
background: tomato;
height: 300px;
width: 300px;
display: grid;
place-items: center;
}
```
%[https://codepen.io/yatharthaa/pen/OJavEML]
1. ### Using CSS Grid and place-self
CSS Grid's place-self property combines both align-self and justify-self properties in a single declaration. Applying `place-self: center` to the child div centers it both vertically and horizontally within the grid.
*Except for Internet Explorer, All browser support* `place-self: center` *property*
```xml
```
```css
.parentContainer {
background: tomato;
height: 300px;
width: 300px;
display: grid;
}
.childContainer {
place-self: center;
}
```
%[https://codepen.io/yatharthaa/pen/XWyEYdz]
---
### Conclusion
A useful and important skill is understanding how to center in CSS. In your work as a web developer, you will eventually need to utilize it.
In this blog post, we have explored 7 different methods to center a div using CSS. These techniques involve using the **CSS position property, Table, Flexbox, and CSS Grid.** By understanding and applying these methods, you can easily center div elements in your web development projects. You can experiment with these techniques to find the approach that best suits your needs.
**Happy coding!**