DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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 on

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 • Edited on

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.

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.