DEV Community

How to center things in CSS 💘

Jayesh Tembhekar ⚡ on March 08, 2020

Yo devs ! 🔥 A quick guide on "How to center things in CSS" 🙌 Most of the time, you write great CSS code from colors to complex animati...

Read full post

danielpdev • Mar 8 '20 • Edited

You could also use the old style:

#content { margin: 0 auto; }
but this works only on block elements, so just add display: block; for inline elements.

Thanks for sharing!

Alvaro Montoro • Mar 9 '20

That would only center horizontally though.

danielpdev • Mar 9 '20

Yes, that's right.
Although, to align both horizontally and vertically you can also use margin in combination with position.

here is an example

Tobias SN • Mar 8 '20

I generally use this website: howtocenterincss.com

mark l chaves • Mar 9 '20 • Edited

Nice.

Just to add, I usually give the flex container the responsibility of aligning its children. E.g.

<section>
  <div id="object"></div>
  <div>Hello World!</div>
</section>

section {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* To vertically align all items added to the flex--not just one. */
}

Then any time you add another child, they will automagically align in the centre. In the example above, the children will align in one column because I specified flex-direction: column;.

Demo on CodePen.

Question @mindset ,

Why define the .element class twice on top of each other? Is there an advantage to that?

Here's how I would have done it.

Jayesh Tembhekar ⚡ • Mar 9 '20

Not an advantage, just to separate main transform properties for easy understanding 😅

mark l chaves • Mar 9 '20 • Edited

Ok. Cool. I typically don't see that style unless it's a mistake. That's why I asked.

If you want to be more OO-like, I would delegate alignment to another class. Then add that class to the class list in the HTML. Like what I've shared with you above. Similar to multiple inheritance.

Then .demo-box and .centre-me are reusable.

Thanks!

Habdul Hazeez • Apr 12 '20

With CSS Grid:

.selector {
    display: grid;
    place-items: center;
}

I wrote about it in the following post:

My WebDev Notes: Center page elements with CSS Grid

Habdul Hazeez ・ Apr 3 ・ 3 min read

#html #css

Dima • Mar 8 '20 • Edited

display: flex for parent
margin: auto for centered block

Adithya Sreyaj • Mar 8 '20

Flex for life 🧡

Khaled Breaker • Mar 10 '20

just add to the parent div {

display: flex;
justify-content: center;
align-items: center;

}