Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

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