Discussion on: 1 line css to center object

View post

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.

rs9110 • Sep 20 '20

Agreed!

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

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