# 5 unique ways to center a child element in its parent
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 would explore 5 unique ways to do so and also give recommendations on the method that works better in most situations.
## 1. Using Table Display
Consider the simple markup:
```htmlembedded=
<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:
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
`text-align` property is used to set the horizontal alignment of an inline element inside a block level one. it is often used to center text horizontally.
`vertical align` property works like text-align but for the vertical axis. It is often used in table elements to center its contents.
`display: table` 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.
### Limitation
This method isn't flexible enough to handle wide-range scenarios like with `divs`. It also 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 would use the markup below:
```htmlembedded
<div class="parent">
<div class="child">
</div>
</div>
```
and styles:
```css
.parent {
width: 500px;
height: 500px;
background-color: orange;
}
.child {
width: 100px;
height: 100px;
background-color: blue;
}
```
The Output:
**Fig:** Initial styling of the other four methods.
In the four remaining methods, we would 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.
**Fig:** Child element centered in its parent.
<!-- -->
## 2. Using absolute positioning with translate
One way to center the `child` element would be to use `absolute` postioning.
```css!
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
### How it works
The `position` property determines how an element is positioned on the page. It takes four values `static`, `relative`, `absolute`, `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.
`top` and `left` properties, sets 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`.
**Fig:** *top:50%*
**Fig:** *left:50%*
Combining both methods would center the element both vertically and horizontally.
The top-left of the element would then sit in the center of the parent. This is why we need the `translate` property to send the element back to it's correct positioning.
**Fig:** *Without the translate property*
### Limitation
Absolute positioning removes an element from the normal flow of the document hence this can cause overlapping and responsiveness problems on multi-content layouts.
In modern CSS, it is advised to use as less absolute positioning as possible
## 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.
`margin` property set to `auto` lets the browser select a suitable margin for the element.
`top` and `bottom` values set to `0` centers the element on the vertical axis.
**Fig:** *top and bottom property set to 0*.
While `right` and `left` values set to `0` centers the element on the horizontal axis.
**Fig:** *left and right property set to 0*.
Combining the two would put the `child` element perfectly 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 would look at more flexible and modern approaches in the next methods.
## 4. Using Flexbox
Flexbox is a CSS module that is designed to model one-dimensional layouts. It provides features that control the alignment, spacing, and order of elements.
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 be able 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 to create 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 are able the center our child element perfectly.
## How It Works
First, we make the parent element a `grid` container by using the display property.
Then, we set the `place-items` property. `place-items` is short for two properties `justify-items` and `align-items`.
`justify-items` sets the mode of alignment on the horizontal axis while `align-items` on the vertical axis
Setting `place-items` to `center` would set the two properties to `center` too
Other ways to achieve the same result using 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 would give the outcome:
## Conclusion
In this article, we looked at 5 different ways to center elements (text and divs) in their parent container. We could summarize what we learnt 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 would recommend using either `flexbox` or `grid` because they achieve the desired result faster and more maintainable code. They also work with both text contents 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/).
Sign in with Wallet
Connect another wallet