Skip to content

Instantly share code, notes, and snippets.

@glnster
Created January 28, 2015 22:30
Show Gist options
  • Save glnster/c316ec701074b4a7164d to your computer and use it in GitHub Desktop.
Save glnster/c316ec701074b4a7164d to your computer and use it in GitHub Desktop.
Vertical Center Hacks
<h1>Vertical Center Hacks</h1>
<div id="wrapper">
<span>3-line hack</span>
<div id="tl">
<p>MUST</p>
</div>
<span>table hack</span>
<div id="tc">
<p>STAY</p>
</div>
<span>another translate</span>
<div id="tr">
<p>VERTICALLY</p>
</div>
<span>flex</span>
<div id="fc">
<p>CENTERED</p>
</div>
</div>
/*
Vertical centering hacks.
Just my stash.
*/
* { box-sizing: border-box; }
p {
margin: 0;
padding: 0;
text-align: center;
}
body {
background: #A4C6B6;
font-family: "Helvetica Neue", Helvetica, sans-serif;
text-align: center;
}
h1 {
font-weight: 200;
color: #222;
}
span {
font-size: .7em;
color: #333;
}
#wrapper {
max-width: 400px;
margin: 0 auto;
}
#wrapper > div {
border: 2px solid black;
height: 100px;
margin: 10px 0;
border-radius: 5px;
}
/* LE HACKS */
/* inline block isn't working for me */
html, body, body:after {
height: 100%;
}
body:after {
content:"";
display: inline-block;
}
body:after, #wrapper {
vertical-align: middle;
}
/* 3-line */
#tl {
transform-style: preserve-3d;
}
#tl p {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* table ie8+ but weird behavior*/
#tc {
height: 100%;
width: 100%;
display: table;
}
#tc p {
display: table-cell;
vertical-align: middle;
}
/* translate ie9+ */
#tr {
height: 100%;
}
#tr p {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* flex ie11+*/
#fc {
display: flex;
justify-content: center;
align-items: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment