Five CSS ways of centering a child in its parent
Published: 2023-04-05 23:57:24

by [Nwalozie Elijah](https://blog.openreplay.com/authors/nwalozie-elijah)

Centering text content or divs (or any other block content) horizontally and vertically is one of the problems every front-end developer faces in the early stages of their learning. In this article, we will explore five unique ways to do so and recommend the method that works better in most situations.


## 1. Using Table Display
Consider the simple markup: 
```html
<div class="parent">
      <p class="child-text">Center Me!!</p>
</div>
```
With the styling
```css
.parent {
  height: 400px;
  width: 400px;
  background: orange;
}
.child-text {
  font-size: 2rem;
  margin: 0;
}
```
The output:

![-](https://blog.openreplay.com/images/five-css-ways-of-centering-a-child-in-its-parent/images/GbhUqjy.png)

Tables in the past were the way to create web layouts, and this is one of the techniques used to achieve that. This could be done by the code below:
```css
.parent{
display: table;
}

.child-text {
display: table-cell;
text-align: center; /* Centers text Horizontally */
vertical-align: middle; /* Centers text Vertically */
} 
```
### How it works
The `text-align` property sets the horizontal alignment of an inline element inside a block level one. It is often used to center text horizontally. The `vertical align` property works like text-align but for the vertical axis. It is often used in table elements to center their contents. The `display: table` property makes the parent element act like a table, while `table-cell` make the child like a cell. This is why the vertical-align property works here.



![-](https://blog.openreplay.com/images/five-css-ways-of-centering-a-child-in-its-parent/images/mKYg4mg.png)

### Limitation
This method isn't flexible enough to handle wide-range scenarios like with `divs`. It is no longer used in modern CSS, but it is important to know if it's seen when handling legacy codebase.

For the rest of the methods, we will use the markup and styles below:
```html
<div class="parent">
    <div class="child">
  </div>
</div>
```

```css
.parent {
 width: 500px;
 height: 500px;
 background-color: orange;
}
.child {
 width: 100px;
 height: 100px;
 background-color: blue;
}
```
The Output:

![-](https://blog.openreplay.com/images/five-css-ways-of-centering-a-child-in-its-parent/images/KYUr4sk.png)

**Fig:** Initial styling of the other four methods.


In the four remaining methods, we will center the child (`blue`) horizontally and vertically in the parent (`orange`) container.

The end product is to have the child perfectly centered in its parent. 

![-](https://blog.openreplay.com/images/five-css-ways-of-centering-a-child-in-its-parent/images/ei6ZOOK.png)

**Fig:** Child element centered in its parent.

## 2. Using absolute positioning with translate
One way to center the `child` element will be to use `absolute` positioning.

```css
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```
### How it works
The `position` property determines an element's position on the page. It takes four values `static`, `relative`, `absolute`, and `relative`, with `static` being the default.
Absolute positioning is a way to position an element relative to its nearest positioned ancestor. If none of its parents is positioned (relative or absolutely), it becomes relative to the whole document.
This is why we set the `position:relative` on the parent.

The `top` and `left` properties set the distance of the child element halfway from the top and left of the parent, respectively. They only work when an element is positioned, and the value is not `static`. 


![-](https://blog.openreplay.com/images/five-css-ways-of-centering-a-child-in-its-parent/images/q42B4Li.png)
**Fig:** *top:50%*

![-](https://blog.openreplay.com/images/five-css-ways-of-centering-a-child-in-its-parent/images/6JXvf1Q.png)
**Fig:** *left:50%*

Combining both methods will center the element both vertically and horizontally.
The element's top-left will then sit in the parent's center. This is why we need the `translate` property to send the element back to its correct positioning.

![-](https://blog.openreplay.com/images/five-css-ways-of-centering-a-child-in-its-parent/images/7AoTkfl.png)
**Fig:** *Without the translate property*



### Limitation 
Absolute positioning removes an element from the document's normal flow; hence this can cause overlapping and responsiveness problems on multi-content layouts.
In modern CSS, using as little absolute positioning as possible is advised.


## 3. Using absolute positioning with auto margins
```css
.parent {
  position: relative;
}
.child {
  position: absolute;
  margin: auto;
  /* Center the element vertically */
  top: 0;
  bottom: 0;
  /* Center the element horizontally */  
  left: 0;
  right: 0; 
}
```

### How It Works
Similar to method 2, we use the position `absolute` property. 
The `margin` property set to `auto` lets the browser select a suitable margin for the element.
The `top` and `bottom` values set to `0` center the element on the vertical axis.


![-](https://blog.openreplay.com/images/five-css-ways-of-centering-a-child-in-its-parent/images/D4kijVZ.png)
**Fig:** *top and bottom property set to 0*.

While `right` and `left` values are set to `0`, center the element on the horizontal axis.

![-](https://blog.openreplay.com/images/five-css-ways-of-centering-a-child-in-its-parent/images/709orU6.png)
**Fig:** *left and right property set to 0*.

Combining the two will perfectly put the `child` element in the center. One short way to combine all properties is to use `inset`, which is short for all four positionings. The code above could be written in the following way:
```css
.parent {
  position: relative;
}
.child {
  position: absolute;
  margin: auto;
  inset: 0; /* Centers element both horizontally and vertically */
}
```

### Limitations
As stated in the previous method, `absolute` positioning should be used less often. We will look at more flexible and modern approaches in the next methods.


<h2>Session Replay for Developers</h2> 
<p><em>
Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data
</em></p>
<img alt="OpenReplay" width="768" height="400" src="https://blog.openreplay.com/assets/overview_Z17Qdyg.png" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em>







## 4. Using Flexbox
Flexbox is a CSS module that is designed to model one-dimensional layouts. It provides features that control elements' alignment, spacing, and order.
This centering problem could be solved simply by the CSS below:
```css
.parent {
  display: flex; /* Make parent a flex-container */
  justify-content: center; /* Centers child horizontally */
  align-items: center; /* Centers child vertically */
}
```

### How it works 
We make the parent a `flex` container to access the other two properties.
`justify-content` property determines how the children of the parent are aligned on the main axis (horizontal in this case)
while `align-items` determine their alignment on the cross-axis (vertical in this case).


### Limitations 
Flexbox is a modern and very powerful tool for creating layouts, and the only downside, in this case, is the support for older browsers like Internet Explorer.


## 5. Using Grid
Grid is a modern CSS model designed to build multi-dimensional layouts. You can define rows and columns in a grid container to create a two-dimensional grid.
The children of a `grid` container are called `grid` items. Centering elements could be easily achieved in grid layouts by the code below:

```css
.parent {
  display: grid;
  place-items: center;
}
```
And that's it; with just two lines of CSS, we can center our child element perfectly.

## How It Works
First, we use the display property to make the parent element a `grid` container.
Then, we set the `place-items` property. `place-items` is short for two properties, `justify-items` and `align-items`. 
`justify-items` sets the alignment mode on the horizontal axis while `align-items` is on the vertical axis.
Setting `place-items` to `center` will set the two properties to `center` too.

Other ways to achieve the same result using a grid are: 
### Using place-content
```css
.parent {
  display: grid;
  place-content: center;
}
```
`place-content` is short for `justify-content` and `align-content`. For a grid layout with only one item, both `place-content` and `place-items` work interchangeably

### Using margin auto on the child element
```css
.parent {
  display: grid;
}
.child {
 margin: auto;
}
```
In a `grid` container, the `margin` property set to `auto` make the browser automatically set the margins of all sides of the `child element.`

### Using place-self on the child element
```css
.parent {
  display: grid;
}
.child {
place-self: center
}
```
The `place-self` property, similar to `place-content` and `place-items`, is short for `justify-self` and `align-self`. It is applied on a `grid-item` and sets the alignment of that item on the horizontal and vertical axis of the parent `Grid` container.

## Expected Result
Methods 2, 3, 4, and 5 produce this outcome:

![-](https://blog.openreplay.com/images/five-css-ways-of-centering-a-child-in-its-parent/images/iTuTVUL.png)


## Conclusion
In this article, we looked at five different ways to center elements (text and divs) in their parent container. We could summarize what we learned in the following points:
1. Center any text horizontally using `text-align: center`.
2. Using `display: table` with `vertical-align:center` to center text vertically in its container.
3. Using `absolute` positioning with `transform: translate` or `margin:auto` to center a div in its parent.
4. Employing more flexible and modern approaches, `flexbox` and `grid`, to achieve the same output. 

I recommend using either `flexbox` or `grid` because they achieve the desired result faster and more maintainable code. They also work with text and block contents (like divs). 

## Resources
To understand flexbox and grid better, see the following articles
- [Building Layouts With CSS3 Flexbox](https://blog.openreplay.com/building-layouts-with-css3-flexbox/).
- [Working With The CSS Grid](https://blog.openreplay.com/working-with-the-css-grid/).




[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)