Skip to content

Instantly share code, notes, and snippets.

@sawadays0118
Last active August 29, 2015 14:11
Show Gist options
  • Save sawadays0118/7f13ff6470a93e45e964 to your computer and use it in GitHub Desktop.
Save sawadays0118/7f13ff6470a93e45e964 to your computer and use it in GitHub Desktop.
【Sass】IE8以上対応の縦横中央揃え【Mixin】 ref: http://qiita.com/sawadays0118/items/b44c2082560242b74f74
// * Vartical & Horizontal Centering (IE8 and above. use :before.)
@mixin vh-center {
text-align: center;
&:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
& > * {
display: inline-block;
vertical-align: middle;
}
}
<div class="vhCenter"><img src="http://placeimg.com/200/200/any" alt=""></div>
.vhCenter { position: relative; width: 600px; height: 600px; background: #ccc; }
.vhCenter > * { position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; }
.vhCenter {
@include vh-center(y);
width: 600px;
height: 600px;
background: #ccc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment