DEV Community

Cover image for How to center things in CSS ๐Ÿ’˜
Jayesh Tembhekar โšก
Jayesh Tembhekar โšก

Posted on • Edited on

How to center things in CSS ๐Ÿ’˜

#css #html #beginners

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 animations.
But I know most of us (beginners) still struggle to center elements on a viewport perfectly.

Don't worry devs, you are no longer be an noob at the end of this short guide.

Let's get started

There are two ways to center any HTML element on a web page :

1. Using Flexbox

2. Using Transform

  • Using Flexbox

HTML code as shown below ๐Ÿ‘‡

  <body>
    <div class="container">
      <div id="object"></div>
    </div>
  </body>
Enter fullscreen mode Exit fullscreen mode

Now the CSS code


html,
body,
.container {
  height: 100%;
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: center;
}

#object {
  height: 100px;
  width: 100px;
  background: red;
  align-self: center;
}
Enter fullscreen mode Exit fullscreen mode
  • Using Transform

HTML code shown below ๐Ÿ‘‡


<body>
    <div class="element"></div>
</body>
Enter fullscreen mode Exit fullscreen mode

Now the CSS code


.element
    {
        width: 100px;
        height: 100px;
        background: coral;           
    }

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

Check out my other posts too ๐Ÿฅ‚

Author: Jayesh ๐Ÿงก

Top comments (11)

Collapse
 
danielpdev profile image
danielpdev • • 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!

Collapse
 
alvaromontoro profile image
Alvaro Montoro •

That would only center horizontally though.

Collapse
 
danielpdev profile image
danielpdev •

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

here is an example

Collapse
 
tobiassn profile image
Tobias SN •

I generally use this website: howtocenterincss.com

Collapse
 
marklchaves profile image
mark l chaves • • 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.

Collapse
 
mindset profile image
Jayesh Tembhekar โšก •

Not an advantage, just to separate main transform properties for easy understanding ๐Ÿ˜…

Collapse
 
marklchaves profile image
mark l chaves • • 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!

Collapse
 
ziizium profile image
Habdul Hazeez •

With CSS Grid:

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

I wrote about it in the following post:

ziizium image

My WebDev Notes: Center page elements with CSS Grid

Habdul Hazeez ใƒป Apr 3 ใƒป 3 min read

#html #css
Collapse
 
zarabotaet profile image
Dima • • Edited

display: flex for parent
margin: auto for centered block

Collapse
 
adisreyaj profile image
Adithya Sreyaj •

Flex for life ๐Ÿงก

Collapse
 
khaleddiz profile image
Khaled Breaker •

just add to the parent div {

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

}

View full discussion (11 comments)

Read next

mshsayket profile image

How to Encrypt and Decrypt Model Data Using Casts in Laravel

Saddam Hossain -

zarr02992 profile image

What is Node JS?

zarr -

tresorama profile image

Dynamic HTML Tag in React Components with the "as" prop

Jacopo Marrone @tresorama -

melanyss profile image

From Bartender to Developer: My Self-Taught Journey in Tech

Melanys -