DEV Community

Cover image for 1 line css to center object
rs9110
rs9110

Posted on

1 line css to center object

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 (28)

Collapse
markohologram profile image
Marko A

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.

Collapse
pallaviiii profile image
Pallavi Gupta

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

Collapse
markohologram profile image
Marko A

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

Thread Thread
pallaviiii profile image
Pallavi Gupta

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

Collapse
rs9110 profile image
rs9110 Author

Agreed!

Collapse
pallaviiii profile image
Pallavi Gupta

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

Collapse
markohologram profile image
Marko A

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.

Thread Thread
pallaviiii profile image
Pallavi Gupta

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;
 }
Thread Thread
markohologram profile image
Marko A • 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.

Thread Thread
pallaviiii profile image
Pallavi Gupta

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

Collapse
thkishor profile image
Thangjam Kishorchand

this one work too

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

Collapse
kdgyimah profile image
Kingsley Gyimah

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
}

Collapse
srshark profile image
Guido Cavallo

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

Collapse
sankthomas profile image
Thomas Sankara

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

Collapse
ifelseolga profile image
Olga Lapovsky

Thanks it just helped me to center a div. 馃槂

Collapse
sankthomas profile image
Thomas Sankara

Niiice. You're welcome Olga

Collapse
louislow profile image
Louis Low

By using Yogurt CSS,

In HTML,

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

In SCSS,

.box {
  @extend .flex, .justify-center, .items-center;
}
Collapse
rs9110 profile image
rs9110 Author

That's awesome.

Collapse
dsaw profile image
Devesh Sawant

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

div {
   width: 100%;
   margin: 0 auto;
}
Collapse
markohologram profile image
Marko A

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.

Collapse
bias profile image
Tobias Nickel

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?

Collapse
rs9110 profile image
rs9110 Author • Edited

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.

Collapse
rs9110 profile image
rs9110 Author

Found the link:
gph.is/g/Ev36Oex

Collapse
igorbrands profile image
Igor Cantelmo

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

Collapse
jswhisperer profile image
Greg, The JavaScript Whisperer

magic, thanks!

Collapse
ericnanhu profile image
Eric Hu

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

Collapse
zoedreams profile image
鈽笍鉁濓笍鈽笍馃晧鈽革笍鉁★笍鈽笍

thank you.