A Pen by sebastianekstrom.

A-Pen-by-sebastianekstrom.markdown

A Pen by sebastianekstrom

A Pen by sebastianekstrom on CodePen.

License.

index.html

<h1>Vertical center with only 3 lines of code</h1>
<h2>(Excluding vendor prefixes)</h2>

<section class="text">
  <p>Hi ho Silver, away!</p>
</section>

<section class="image">
  <img src="http://placekitten.com/100/100">
</section>

<section class="block-of-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quia doloremque tempora placeat officia ex obcaecati tenetur deserunt repudiandae praesentium.</p>
</section>

<section class="mixin">
  <p>At quia doloremque tempora placeat officia ex obcaecati tenetur deserunt repudiandae praesentium.</p>
</section>

style.scss

@import "compass";
.text p {
  position: relative;
  top: 50%;
  	-webkit-transform: translateY(-50%);
  	-moz-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

.image img {
  position: relative;
  top: 50%;
  	-webkit-transform: translateY(-50%);
  	-moz-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

.block-of-text p {
  position: relative;
  top: 50%;
  	-webkit-transform: translateY(-50%);
  	-moz-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

@mixin vertical-align {
  position: relative;
  top: 50%;
  	-webkit-transform: translateY(-50%);
  	-moz-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

.mixin p {
  @include vertical-align;
}


/* ====================================
   Base styling
   ==================================== */

body {
  font-family: sans-serif;
}

h1, h2 {
  text-align: center;
}

section {
  display: block;
  max-width: 500px;
  background: #70cfd8;
  margin: 0 auto 1em;
  height: 200px;
  border-radius: .5em;
}