Skip to content

Instantly share code, notes, and snippets.

@ljayz
Forked from abernier/index.css
Created August 10, 2012 09:23
Show Gist options
  • Save ljayz/3312867 to your computer and use it in GitHub Desktop.
Save ljayz/3312867 to your computer and use it in GitHub Desktop.
Vertical centering CSS technique
/**
* Vertical centering CSS technique
*/
div:before,
div p {display:inline-block; vertical-align:middle;}
div:before {content:" "; height:100%;}
<!DOCTYPE html>
<meta charset="utf-8">
<title>Vertical centering CSS technique</title>
<link rel="stylesheet" href="index.css">
<div style="height:100px; border:1px solid;">
<p style="border:1px dotted;">I'm vertically centered.</p>
</div>
div:before,
div p {display:inline-block; vertical-align:middle;}
div:before {content:" "; height:100%;}
<!DOCTYPE html>
<meta charset="utf-8">
<title>Vertical centering CSS technique</title>
<link rel="stylesheet" href="index.css">
<div style="height:100px; border:1px solid;">
<p style="border:1px dotted;">I'm vertically centered.</p>
</div>
{"view":"separate","fontsize":"100","seethrough":"1","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment