Why isn’t my CSS on this project working? Everything I’ve read has said that
display:flex;
align-items:center;
should place everything into the middle of the screen regardless of size. Yet I can’t seem to get it to work. Any suggestions?
You’re almost there. Remember that flexbox defaults to flex-direction: row. If you omit flex-direction, you get the default row. You want the other option.
This is my flexbox go-to guide:
2 Likes
Setting the direction to column got it horizontally centered but still not vertically, which is the issue I always seem to struggle with when it comes to CSS.
I appreciate the guide, although I’m seeing a solution for vertical centering. (Might be just my noobiness not registering it though.)
I’m confused about what your end-goal is. Which elements do you want vertically centered?
I want everything in the middle of the screen. I’m only seeing them horizontally centered at the top, although even the guide says align-items:center; should work. Maybe it’s only not working on my end?
I’m tired of cheating the effect with a bunch of margin math but every way people say this should work, doesn’t work. Guess we’re still stuck using margin cheats to get items into the dead center of the screen? Why is it such a pain-in-the-rear to accomplish? I’d thought there’d be one command for this by now.
Believe me, I understand your frustration. How will you handle scrolling with vertical centering?
I won’t have to if I can get it to work the way I want. When the list populates it’ll expand beyond the screen and send the search function to the top. A little padding should keep it from hitting the top pixel and all should be fine.
I solved the issue with a new form of measurement! V-sizes. The V stands for viewport. It takes the screen into account. So a 15vh top margin is 15% from the top. Worked like a charm, even animated the move up on-click with it.
Here’s more info: http://thenewcode.com/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design
2 Likes
Nicely done. vh is one of those things I never think to use.
I’ll be using it all the time now! It’s exactly what we need in today’s day-and-age of varying screen sizes.
Not totally related but thought you might appreciate this…
from: CSS tricks; Centering the Complete Guide
You gotta love something that starts off like this:
Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach for.
1 Like
YES!!! When I discovered vh and vw I was pretty excited about it. It’s so simple.
Too bad it’s not implemented on all browsers yet and therefore isn’t a viable method to use if you want it to be universally compatible.
True. It’s nice to see it work on my machine though. 