Last active
November 21, 2018 01:03
-
-
Save carlos-sanchez/7443565 to your computer and use it in GitHub Desktop.
Absolute center techniques http://css-tricks.com/centering-css-complete-guide/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Some more ways for absolute centering. http://digitalfortress.tech/tricks/13-killer-ways-to-center-elements-with-css/