rs9110

Posted on Sep 19, 2020

1 line css to center object

#html #css #webdev #tutorial

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 with a single line of css code.

We accomplish this by using the place-items property.

First, make sure to set the display to grid. Then, set the place-items to center as shown below.

div {
   display: grid;
   place-items: center;
}

That's it. ✌️

Top comments (26)

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 :)

Marko A • Sep 25 '20

Well it's hard to tell without looking at any code. It would be great if you could show some code, then we can see what's happening.

Pallavi Gupta • Sep 25 '20

html part :

<body>
    <div id="center" >
        <textarea name="words" id="counter" placeholder="write something" oninput="count(this);"></textarea>
        <p id="write"></p>
    </div>

css part:

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

Marko A • Sep 25 '20 • Edited

<body> probably doesn't have full browser height. Inspect this inside your browser and see what area on the page does <body> actually take. It probably has the same height as your #center here so it cannot really center that #center vertically on the page the way you want it to because its parent (<body>) isn't taller.

Try adding this code to your page and then check if it works and your #center gets centered vertically on the page:

body {
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

Padding and margin here is only to remove default browser padding/margin so you don't get scrollbars in this case.

One thing I can definitely suggest to you is to learn how to use your browser dev tools, they are a really great tool to help you debug stuff like this and see visually what is going on. Btw, Firefox probably has the best dev tools for CSS.

Pallavi Gupta • Sep 25 '20

You were right about the body height and I also noticed, instead of #center I had typed .center.
But I still can't get my objects to be centered.

Also, thanks for the points about body height, padding, margin, and dev tools :)

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.