Vertical Center Hacks

index.html

<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>

script.js

/*
  Vertical centering hacks.
  Just my stash.
*/

style.scss

* { 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;
}

Vertical-Center-Hacks.markdown

Vertical Center Hacks

Just my stash of vertical centering hacks.

A Pen by Glenn Cueto on CodePen.

License.