Skip to content

Instantly share code, notes, and snippets.

@carlos-sanchez
Last active November 21, 2018 01:03
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save carlos-sanchez/7443565 to your computer and use it in GitHub Desktop.
Save carlos-sanchez/7443565 to your computer and use it in GitHub Desktop.
/*
Cross-browser (including IE8-10)
Más info: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
*/
.absolute-center {
/* height: must be declared */
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/*
Variable height content
Won’t work in IE8
Results in blurry rendering of edges and text in some cases
*/
.centering-the-unknown {
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.vertically-centering-the-unknown {
position: absolute;
top: 50%;
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.horizontally-centering-the-unknown {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
transform: translate(-50%,0);
}
/* block level element using flexbox */
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
/*
Variable height content
Works well cross-browser
*/
/*
<div class="Center-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
<!-- CONTENT -->
</div>
</div>
</div>
*/
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
}
/* inline element, single line */
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
/* or */
.link {
padding-top: 30px;
padding-bottom: 30px;
}
/* inline element, multiple lines */
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px; /* required */
}
/* or ghost element */
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}
@niketpathak
Copy link

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