30

It's 2017.

Why is vertically centering a div still so stinkin hard?

Yeah yeah ik what you will tell me, "use flexbox".
Well guess what,. I HAVE BEEN TRYING TO FOR THE PAST 6 FUCKING HOURS!

I've gone as far as to copy code from 20+ different websites advertising working solutions. My tab bar looks like the fucking rockey mountains!

My main problem is that flexbox on chrome is not accepting ANY % values.

Now if you'll excuse me, I need to go kill myself. YAY! 🤗

Comments
  • 31
    Use flexbox
  • 5
    .magical-vert-center-wrap{
    display: flex;
    align-items: center;
    }
  • 2
    I totally feel you. A lot of times I have so much freaking trouble vertically centering things, even with all of the different resources online that I've tried! There's gotta be a simple way to overwrite all other stylings to ensure that your vertical centering takes priority. Otherwise this is just going to eat a lot of precious dev time.
  • 2
    Flexbox items are sized with flex, which can be set to an arbitrary integer depending on how you want it to size.

    Flex 1 with no other siblings with flex still expand that item to its max size. Another item with Flex 1 will share that expanded size equally.

    Say one item is Flex 2 and the other is Flex 1, you have a total of 3 slices to share, one get 2/3 and the other 1/3.

    That's the most rudimentary explanation I can think of.
  • 1
  • 0
    Wrote a blog post on this, hopefully it helps? https://blog.kabir.ml/posts/...
  • 1
    I don't see what's hard about it. Just those two lines will do. If some other css is breaking it, use the inspector to turn them off and find the culprit, then kill it by removing / resetting the rule.
  • 0
    @king
    Nice website!
  • 0
    http://sketchingwithcss.com/samplec...

    Use vh and vw instead of percent, should work on chrome then.
  • 2
    @king This is the most straightforward, bullshit-free answer​ I've ever seen. You should feel proud. Damn, your offspring should be proud too!
  • 1
    I. Use flex box
    II. Don't do web development gigs
    III. Mobile is better.
    IV. I'm new please don't hurt me.
  • 0
    Because people are too proud to admit that their work is flawed from the very beginning.
  • 2
    @richo97 welcome to devRant buddy
  • 1
    This is one proper rant
  • 2
    @chzbgr thank you I thought this is going be like stack overflow where virtually every contribution is instantly down voted into oblivion.
  • 3
    Might I suggest you try http://flexboxfroggy.com

    It's a nice little game that teaches you how to do most layouts in flexbox.

    I used it to learn to use it myself.
  • 0
    @hourd that was the best procrastination I've done all day
  • 3
    So let it be hard, master it and feel good about charging customers for it.

    In case this sounded patronizing:
    - not my intent. Sorry.

    Also: isn't cracking the harder nuts what makes us feel good about our work?
    Take a step back, grab a coffee and 'once more unto the breach' you'll get there!
  • 1
    @richo97 devRant is the polar opposite of that.
  • 2
    @chzbgr that's great to hear, so can this be my safe space?
  • 0
    @richo97 You're home now.
  • 0
  • 1
    @king I'll have to try that when I get home. Thanks!
  • 0
    @hourd yeah I saw that in my comb prong tab bar last night. That was 1 of the 6 hours.
  • 0
    @poster983 did it not help?
  • 0
    @hourd
    Absolutely, it helped me understand what I was actually doing, and it was a nice break from utter hell.
  • 0
    @richo97 and your happy place!
  • 0
    @hourd whoop I miss read your comment.

    It did help me understand, however, the css gods hated me yesterday and nothing worked at all.
  • 0
    @Kalvin Thank you! 🤗
Add Comment