Vertical align anything with just 3 lines of CSS

HTML Part:

<!DOCTYPE html>
<html>
<head> </title>
<body>
<section class="text">
  <p>I'm vertically aligned! Hi ho Silver, away!</p>
</section>
</body>
</html>

CSS Part:

body {
  font-family: Helvetica Neue, Helvetica, sans-serif;
  background: #59488b;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
}

section {
  display: block;
  max-width: 500px;
  background: #433669;
  margin: 0 auto 1em;
  height: 140px;
  border-radius: .5em;
  color: white;
}

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

CodePen
This code has been taken from here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s