douchebag way of vertical alignment

douchebag-vertical-align.css

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

douchebag way of vertical alignment in my subjective opinion.

Even if it's a bad idea to you, it doesn't mean it is to somebody else. Context helps. Calling it a douchebag move isn't very appropriate.

douchebag way of vertical alignment in my subjective opinion.

Even if it's a bad idea to you, it doesn't mean it is to somebody else. Context helps. Calling it a douchebag move isn't very appropriate.

why douchebag ?

why douchebag ?

I think it's funny! ... but then maybe I'm just a douchebag. :)

I think it's funny! ... but then maybe I'm just a douchebag. :)

I do this regularly.. Is there a reason why I shouldn't or are you just kidding around?

I do this regularly.. Is there a reason why I shouldn't or are you just kidding around?

some light reading for everyone here... http://colintoh.com/blog/display-table-anti-hero

some light reading for everyone here... http://colintoh.com/blog/display-table-anti-hero

This works well a lot of the time, but just be aware that since css transforms are performed on layers on the GPU, the calculations it returns will not necessarily land on even pixels. When that happens you're going to get blurry text and edges.

If you know the height of the element you're centering, it's better to use a negative top margin that is half the height. That will always round to the nearest pixel. Or just cave and use flexbox 😄

This works well a lot of the time, but just be aware that since css transforms are performed on layers on the GPU, the calculations it returns will not necessarily land on even pixels. When that happens you're going to get blurry text and edges.

If you know the height of the element you're centering, it's better to use a negative top margin that is half the height. That will always round to the nearest pixel. Or just cave and use flexbox 😄

To prevent the half-pixel issue, set this on the parent element:

  transform-style: preserve-3d;

To prevent the half-pixel issue, set this on the parent element:

  transform-style: preserve-3d;