loading...
Cover image for 1 line css to center object

1 line css to center object

rs9110 profile image rs9110 ・1 min read

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. ✌️

Discussion

pic
Editor guide
 

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.

 

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

 

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

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

 

Agreed!

 

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

 

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.

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

<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.

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

 

this one work too

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

 

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
}

 

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...

 

By using Yogurt CSS,

In HTML,

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

In SCSS,

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

That's awesome.

 

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

<!-- HTML -->
<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%;)

 

Thanks it just helped me to center a div. 😃

 

Niiice. You're welcome Olga

 

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

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

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.

 

great tip, and awesome background in the comments ! ! !

But did anyone see the fantastic title image? where did you get this? or how did you made it?

 

I wish I created this, but no, I got it from GIPHY. I was just looking at 8bit stuff and found this. I don't have the link sadly.

 

Found the link:
gph.is/g/Ev36Oex

 

I m in love with this 8bit animation, pretty awesome!

 
 

Finally, I've been looking for this for a long time. Thanks!