Experiments in Vertical Centering

Experiments-in-Vertical-Centering.markdown

Experiments in Vertical Centering

Various experiments in vertical centering.

A Pen by KatieK on CodePen.

License.

index.html

<h1>Experiments in Vertical Centering</h1>

<span class="works">Works - notes for details.</span>
<span class="static-hw">Requires known  height or width. </span>
<span class="no-worky">Works, but not the way you think it should.</span>

<div id="xlate" class="attempt works">
  <h3><a href="http://css-tricks.com/centering-percentage-widthheight-elements/">Translate</a></h3>
  <div class="outer">
    <div class="inner">Relies on <a href="http://caniuse.com/transforms2d">CSS2 transforms</a>, so mind your browser support.</div>
  </div>
</div>

<div id="ghost" class="attempt works">
  <h3><a href="http://css-tricks.com/centering-in-the-unknown/">CSS Tricks: Ghost Element</a></h3>
  <div class="outer">
    <div class="inner">Relies on pseudo-elements and inline-block, so mind your browser support.</div>
  </div>
</div>

<div id="table" class="attempt works">
<h3>Simple Table</h3>
<table class="outer">
  <tr>
    <td class="inner">By using <strong>vertical alignment within a table</strong>, a variable height child can be vertically centered within a known height parent.</td>
  </tr>
</table>
</div>

<div id="yuhu" class="attempt">
  <h3><a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">Vertical Centering in CSS by Yuhu</a></h2>
  <div class="outer">
    <div class="inner">
      <div class="innie-inner">
      Puts table styling on semantic elements; requires extra element. Vertical center isn't correct in IE6 and IE7 even with hacks - see <a href="http://codepen.io/KatieK2/pen/BKFor">http://codepen.io/KatieK2/pen/BKFor</a>.
      </div>
    </div>
  </div>
</div>

<div id="neg-mar" class="attempt static-hw">
  <h3><a href="http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/">CSS Tricks: Negative margins</a></h3>
  <div class="outer">
    <div class="inner">Requires known height and width for <code>.inner</code>.<code>.outer</code> may have dynamic h/w. </div>
  </div>
</div>

<div id="valign" class="attempt no-worky">
  <h3>v-align</h3>
  <div class="outer">
    <div class="inner">
      <img src="http://placekitten.com/64/64?image=12" />
      <code>vertical align</code>'s standard use is to specify how inline elements will align with each other.
    </div>
  </div>
  <p>See <a href="http://reference.sitepoint.com/css/vertical-align">Sitepoint</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align">MDN</a> for more on vertical-align.</p>
</div>

style.css

h1, h2, h3, p { margin: 1rem; }
a { color: black; }

/* Designations */
span { margin: 0 0 1rem 1rem; border: solid black 1px; padding: .5em; float: left; font-size: small; }
.static-hw { background-color: #9cc !important; } 
.no-worky { background-color: #c99 !important; } 
.works { background-color: #99a !important; } 

/* Box Template */
.attempt { float: left; width: 24rem; margin-bottom: 1rem; margin-left: 1rem; border: solid #000 1px; }
.attempt:first-of-type { clear:left; }
.outer { height: 12rem; width: 22rem; border: dotted black 1px; margin: 1rem }
.inner { width: 18rem; margin: 0 auto; border: solid black 1px; padding: .5rem; -moz-box-sizing: border-box; box-sizing: border-box; }

#xlate .outer { position: relative; }
#xlate .inner { 
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#ghost .outer { text-align: center; }
#ghost .outer:before { content: ''; display: inline-block; height: 100%;  vertical-align: middle; margin-right: -0.25em; }
#ghost .inner { display: inline-block; vertical-align: middle; }

#table table { border-collapse: separate; border-spacing: 2px; }
#table .inner { text-align: center; vertical-align: middle; }

#yuhu .outer { display: table; overflow: hidden; *position: relative; }
#yuhu .inner { display: table-cell; vertical-align: middle; *position: absolute; *top: 50%; }
#yuhu .innie-inner { *position: relative; *top: -50%; }

#neg-mar .inner { position: relative; top: 50%; left: 50%; height: 6rem; margin-top: -3rem; margin-left: -9rem; }

#valign .outer {  }
#valign .inner {  }
#valign img { vertical-align: middle /*top bottom*/; }