DEV Community

Cover image for Center Element Using CSS
Suprabha
Suprabha

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

OR

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

3️⃣ Using position absolute

A simple old trick using position absolute.

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
table {
    height: 100vh;
    width: 100%;
}

.father {
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

7️⃣ Using margin auto

Applying margin-auto on a parent flex.

.parent {
    display: flex;
    height: 100vh;
}

.child {
    margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

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 😋

🌟 Twitter 👩🏻‍💻 Suprabha.me 🌟 Instagram

Top comments (4)

Collapse
 
alohci profile image
Nicholas Stimpson • Edited

Some other old-school methods from the time before flexbox that spring to mind.

Use position:absolute with margins.

.child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: -moz-fit-content;
    width: fit-content;
    height: 0;
}

And the ghost ::before inline-block box;
.parent {
  text-align: center;
  font-size:0;
}
.parent::before {
  content: '';
  height: 100vh;
  vertical-align: middle;
  display: inline-block;
}
.child {
  vertical-align: middle;
  display:inline-block;
  font-size:1rem;
}

And the line-height method
.parent {
  line-height:100vh;
  text-align:center;
}
.child {
  display:inline-block;
  line-height:1.2rem;
}
Collapse
 
flyingduck92 profile image
Sekti Wicaksono • Edited

You also can center using Grid with

display: grid; 
place-content: center;

place-content: center is the shorthand of align-items: center and justify-content: center

display: grid; 
align-items: center;
justify-content: center;
Collapse
 
sarthology profile image
Sarthak Sharma

Great article! Grid and Flex actually made it a lot easier to handle centering elements. I remember in old days it was a mess. 😅

Collapse
 
jlohani profile image
Jayant Lohani

Great article.
Currently, I am working on understanding CSS Flexboard and Grids. I don't know much of CSS so this helped a lot. Thanks for the tips.