Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
douchebag way of vertical alignment
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
@IainIsCreative

This comment has been minimized.

Show comment
Hide comment
@IainIsCreative

IainIsCreative Oct 28, 2014

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.

@gabssnake

This comment has been minimized.

Show comment
Hide comment
@gabssnake

gabssnake Oct 28, 2014

why douchebag ?

why douchebag ?

@rowe-morehouse

This comment has been minimized.

Show comment
Hide comment
@rowe-morehouse

rowe-morehouse May 7, 2015

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. :)

@adamsheridan

This comment has been minimized.

Show comment
Hide comment
@adamsheridan

adamsheridan Jun 19, 2015

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?

@grde1988

This comment has been minimized.

Show comment
Hide comment

grde1988 commented Sep 2, 2015

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

@josephschmitt

This comment has been minimized.

Show comment
Hide comment
@josephschmitt

josephschmitt May 19, 2016

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 😄

@mehas

This comment has been minimized.

Show comment
Hide comment
@mehas

mehas Jun 28, 2016

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

  transform-style: preserve-3d;

mehas commented Jun 28, 2016

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

  transform-style: preserve-3d;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment