Learn More
Resend Email
562
viadukt
8y

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

undefined

css

front-end

frontend

todo
Favorite
Ranter
Comments
  • 44
    8y
    Use flex!
  • 12
    8y
    Flexbox to the top!
  • 7
    8y
    align-items: center

    Done.
  • 32
    8y
    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
    8y
    In case you cant use flexbox, set a position relative, a top of 50% and a transform translateY(-50%).
  • 14
    8y
    Why learn mandarin when you can just eat it? </ShitJoke>
  • 6
    8y
    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
    8y
    Fuck css in particular, son of a bitch
  • 2
    8y
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    this works 90% of the time
  • 5
    8y
    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
    8y
    Flex box will change your life! ;)
  • 0
    8y
    Put a TODO,now it's another person's problem😂
  • 0
    8y
    .el{
    display: table;
    }
    .el .em{
    display: table-cell;
    vertical-align: middle;
    }
  • 0
    8y
    @CoffeeAllDay so this must be one of your struggles 😜
  • 1
    8y
    learn programming should be added to the bottom of that list
  • 0
    8y
    Use SASS
    Done
  • 1
    8y
    Le me trying to center something :
    Margin-left:auto
    Margin-right:auto
    Text-align:center
    Please.center.please.please(text)
  • 1
    8y
    align-items: center;
    /* If flex isn't available: */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* You're welcome. */
  • 0
    8y
    I wrote a blog post on this! https://blog.kabir.ml/posts/...
  • 1
    8y
    That's easy...
Related Rants
devRant © 2021 Hexical Labs LLC
Privacy Policy  |  Terms of Service
Add Comment