DEV Community

1 line css to center object

rs9110 on September 19, 2020

Your search for a way to put an object absolutely in the dead center has finally come to an end because I'm going to show you how to do just that w...

Read full post

Marko A • Sep 19 '20

This is pretty handy, but keep in mind browser compatibility if the project you are working on has to support certain browsers.

We all know that I'm mostly talking about IE11 here. Of course IE11 doesn't support grid properly, but it doesn't support place-items at all.

You could get the same effect using flexbox:

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

This will produce the same effect of centering vertically and horizontally, but it will offer you better browser compatibility.

Pallavi Gupta • Sep 26 '20

It's working now. Thanks for your help!
The mistake was that the CSS I was applying to #center should have been applied to the body.

Thank you so much! Now I'm much more clear about flexbox than I was before :)

Marko A • Sep 26 '20

Oh yeah I didn't even catch that one. Well initially even if you applied all those rules to body, it wouldn't work because body had the same height as the content inside it.

I'm glad you figured it all out :)

Pallavi Gupta • Sep 26 '20

Yes, the body height thing was a new point for me.
Thanks a ton :)

rs9110 • Sep 20 '20

Agreed!

Pallavi Gupta • Sep 25 '20

Hi!

I can't center my object vertically using this method, only horizontally.

I'm a newbie in web development and would appreciate your help :)

Thangjam Kishorchand • Sep 19 '20

this one work too

div{
display:flex;
align-items:center;
}

Kingsley Gyimah • Sep 19 '20

Sure this works, but for only one axis.
You would have to add 'justify-content: center' also to ensure it remains centered on both x and y-axis (horizontal and vertical).

That is:
// This is absolutely centered!
div {
display:flex;
align-items:center;
justify-content: center
}

Guido Cavallo • Sep 19 '20

place-content is a shorthand for align-content and justify-content. Also place-items its for align-items and justify-items.

developer.mozilla.org/en-US/docs/W...
developer.mozilla.org/en-US/docs/W...

Thomas Sankara • Sep 20 '20

I have another one that I used to use before I learned flexbox and grid...

 <p class="p">This is a paragraph</p>

/* CSS */ .p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Mostly I used to do this when the page I build will fit the user's device screen without any scrollbars. (As in height: 100vh and width: 100%;)

Olga Lapovsky • Sep 21 '20

Thanks it just helped me to center a div. 😃

Thomas Sankara • Sep 25 '20

Niiice. You're welcome Olga

Louis Low • Sep 19 '20

By using Yogurt CSS,

In HTML,

<y class="flex justify-center items-center"> ... </y>

In SCSS,

.box {
  @extend .flex, .justify-center, .items-center;
}

rs9110 • Sep 20 '20

That's awesome.

Devesh Sawant • Sep 19 '20

That or our gold old margin (works in IE6) :)

div {
   width: 100%;
   margin: 0 auto;
}

Marko A • Sep 19 '20

Unfortunately, this doesn't center the element vertically, only horizontally. But if you just need to center the element horizontally, then just the margin trick will work just fine.

Btw, you don't need width: 100% in this code here, div is a block level element and has 100% width by default.