loading...
Cover image for How to center things in CSS πŸ’˜

How to center things in CSS πŸ’˜

mindset profile image Jayesh Tembhekar ⚑ Updated on ・1 min read

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>

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;
}


  • Using Transform

HTML code shown below πŸ‘‡


<body>
    <div class="element"></div>
</body>

Now the CSS code


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

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

Check out my other posts too πŸ₯‚

Author: Jayesh 🧑

Posted on by:

mindset profile

Jayesh Tembhekar ⚑

@mindset

Devoted developer πŸ˜ƒ // Web Advocate πŸ‘¨β€πŸŽ“ // Data Science πŸ“Š// Ui-Ux maker β˜‚ //

Discussion

markdown guide
 

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!

 

That would only center horizontally though.

 

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

here is an example

 
 

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.

 

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

 

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!

 
 

display: flex for parent
margin: auto for centered block

 
 

just add to the parent div {

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

}