Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Center anything horizontally vertically or on both axis in scss
// Center anything horizontally, vertically or both (assuming that the parents position is set to relative)
// Codepen Example Usage: https://codepen.io/anon/pen/yPbgYW
@mixin center($center: 'all') {
position: absolute;
@if $center == 'all' {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} @else if $center == 'horizontal' {
top: 0;
left: 50%;
transform: translateX(-50%);
} @else if $center == 'vertical' {
left: 0;
top: 50%;
transform: translateY(-50%);
}
}
@omril1

This comment has been minimized.

Copy link

@omril1 omril1 commented Apr 26, 2018

I don't like this approach, since it sometimes make the centered element blurry in chrome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment