.element { | |
position: relative; | |
top: 50%; | |
transform: translateY(-50%); | |
} |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
IainIsCreative
commented
Oct 28, 2014
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. |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
gabssnake
commented
Oct 28, 2014
why douchebag ? |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
rowe-morehouse
commented
May 7, 2015
I think it's funny! ... but then maybe I'm just a douchebag. :) |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
adamsheridan
Jun 19, 2015
I do this regularly.. Is there a reason why I shouldn't or are you just kidding around?
adamsheridan
commented
Jun 19, 2015
I do this regularly.. Is there a reason why I shouldn't or are you just kidding around? |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
grde1988
Sep 2, 2015
some light reading for everyone here... http://colintoh.com/blog/display-table-anti-hero
grde1988
commented
Sep 2, 2015
some light reading for everyone here... http://colintoh.com/blog/display-table-anti-hero |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
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
josephschmitt
commented
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 comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
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; |
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.