Text and Image vertical align middle.

All content is vertical align middle.

by Ankit Patidar

HTML

<h1>Vertical center with only 3 lines of CSS</h1>

<section class="text">
  <h2>Text</h2>
  <p>I'm vertically aligned! Hi ho Silver, away!</p>
</section>

<section class="image">
  <h2>Images</h2>
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=120%C3%9770&w=120&h=70">
</section>

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

<p class="read-more">More info at <a href="#">zerosixthree.se</a></p>

CSS

/**
 * Vertical align anything with 3 lines of CSS (excluding vendor prefixes)
 *
 * .element {
 *   position: relative;
 *   top: 50%;
 *   transform: translateY(-50%);
 * }
 * -----------------------------------------
 * Read more at: zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 */


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

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

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

/* ====================================
   Base styling, to make the demo more fancy
   ==================================== */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700,100);

body {
  font-family: Roboto, sans-serif;
  background: #2C3D51;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
}

h1 {
  text-align: center;
  color: white;
  font-weight: 300;
  margin: 0.5em 0 1em 0;
}

h2 {
 text-transform: uppercase;
 margin: 0;
 font-size: 16px;
 position: absolute;
 top: 5px;
 right: 5px;
 font-weight: bold;
 color: #ECF0F1; 
}

section {
  display: block;
  max-width: 500px;
  background: #E74C3C;
  margin: 0 auto 1em;
  height: 150px;
  border-radius: .2em;
  position: relative;
  color: white;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  }
 section img, section p {
   padding: 1em;
   margin: 0;
}


.block-of-text {
  height: 220px;
}

.read-more {
  text-align: center;
  color: white;
  font-size: 12px;
  margin-top: 3em;
}
.read-more a {
  text-decoration: none;
  color: #E74C3C;
}