Skip to content

Instantly share code, notes, and snippets.

@abernier
Created June 4, 2012 08:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save abernier/2867324 to your computer and use it in GitHub Desktop.
Save abernier/2867324 to your computer and use it in GitHub Desktop.
CSS vertical centering technique
.vcenter {white-space:nowrap;}
.vcenter > * {white-space:normal;}
.vcenter:before,
.vcenter >* {display:inline-block; vertical-align:middle;}
.vcenter:before {content:""; height:100%;}
.vcenter {word-spacing:-.25em;}
.vcenter > * {word-spacing:normal;}
<!DOCTYPE html>
<meta charset="utf-8">
<title>Vertical centering CSS technique</title>
<link rel="stylesheet" href="index.css">
<div class="vcenter" style="height:100px; border:1px solid;">
<p style="border:1px dotted;">I'm vertically centered.<br>I'm vertically centered. I'm vertically centered. I'm vertically centered. I'm vertically centered. I'm vertically centered. I'm vertically centered. I'm vertically centered. I'm vertically centered. I'm vertically centered. I'm vertically centered. I'm vertically centered.</p>
</div>
@abernier
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment