Center Element Using CSS

Centering an element horizontally and vertically is a very common interview question. Suppose there is a parent element surrounding the child element:

<div class="parent">    <div class="child">hello world</div></div>

Different ways to align an element to the center of the page:

1. Using Flex
2. Using Grid
3. Using position absolute
4. Using Table
5. Using writing-mode
6. Using Table tag
7. Using margin auto

1 Using Flex

Flexbox control how items are placed and how empty space is distributed in ways that would have required either magic numbers in CSS for a specific number of elements.

Depending on the flex-direction, we might use justify-content or align-items to adjust as needed.

.parent {    height: 100%;    display: flex;    align-items: center;    justify-content: center;}

2 Using Grid

CSS Grid includes pretty much the same alignment options as flexbox, so we can use it on the parent:

.parent {    height: 100vh;    display: grid;    place-items: center;}

OR

.parent {    height: 100vh;    display: grid;    align-items: center;    justify-content: center;}

3 Using position absolute

A simple old trick using position absolute.

.parent {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}

4 Using Table

A really simple approach and one of the first (back in the day, everything was tables), is using the behavior of table cells and vertical-align to center an element on the container.

.parent {    width: 100vw;    height: 100vh;    display: table;}.child {    display: table-cell;    vertical-align: middle;    text-align: center;}

5 Using writing-mode

writing-mode can change the display direction of the text. For example, you can use writing-mode to change the display direction of the text to the vertical direction.

.parent {    writing-mode: vertical-lr;    text-align: center;    height: 100vh;}.child {    writing-mode: horizontal-tb;    display: inline-block;    width: 100%;}

6 Using Table tag

You can also use table tag.

<table>    <tbody>        <tr>            <td class="father">                <div class="child">hello world</div>            </td>        </tr>   </tbody></table>

table {    height: 100vh;    width: 100%;}.father {    text-align: center;}

7 Using margin auto

Applying margin-auto on a parent flex.

.parent {    display: flex;    height: 100vh;}.child {    margin: auto;}

Best way I used are display flex(1) and display grid(2).

Thanks for reading the article.

I hope you learnt something from this article. Also, let me know if there is any other way to bring the element at the center of the page .

Please feel free to ping me on @suprabhasupi