573
viadukt
3y

Front-end developer's to-do list :
☑ Climb Everest
☑ Learn how to speak mandarin
☑ Become god
◻ Vertically center something in CSS

Comments
  • 46
    Use flex!
  • 11
    Flexbox to the top!
  • 6
    align-items: center

    Done.
  • 32
    Yeah yeah, in theory there are 200 ways to do this and actually we know them.
    But there's always this case where you try your ass off and nothing does the job.😄
  • 17
    In case you cant use flexbox, set a position relative, a top of 50% and a transform translateY(-50%).
  • 15
    Why learn mandarin when you can just eat it? </ShitJoke>
  • 4
    Or if you want to shit all over the page you use:

    #element {

    position: absolute;

    top:0;

    right:0;

    bottom:0;

    left:0;

    margin:auto;

    }
  • 4
    Fuck css in particular, son of a bitch
  • 2
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    this works 90% of the time
  • 6
    As mostly a back end developer, CSS is like some fickle creature you have to give your love and attention to and fiddle with 20 different knobs and then it will work, slowly, but eventually... But not in all environments... And you just ask yourself why is this even worth the hassle.

    As a back end developer, CSS is still much better than what we have.
  • 6
    CSS is great. Write 5 lines, run it; didnt work. Rewire, run again; didn't work. Repeat 2 more times...
    "Yes! The text stays within my margins!"
  • 1
    Flex box will change your life! ;)
  • 0
    Put a TODO,now it's another person's problem😂
  • 0
    .el{
    display: table;
    }
    .el .em{
    display: table-cell;
    vertical-align: middle;
    }
  • 1
    @CoffeeAllDay so this must be one of your struggles 😜
  • 1
    learn programming should be added to the bottom of that list
  • 0
    Use SASS
    Done
  • 1
    Le me trying to center something :
    Margin-left:auto
    Margin-right:auto
    Text-align:center
    Please.center.please.please(text)
  • 1
    align-items: center;
    /* If flex isn't available: */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* You're welcome. */
  • 0
    I wrote a blog post on this! https://blog.kabir.ml/posts/...
  • 0
    That's easy...
Add Comment