Skip to content

Instantly share code, notes, and snippets.

@dolvik
Last active May 26, 2016 14:34
Show Gist options
  • Save dolvik/5f9d9c512947667c4526887195deb808 to your computer and use it in GitHub Desktop.
Save dolvik/5f9d9c512947667c4526887195deb808 to your computer and use it in GitHub Desktop.
Position element vertically centered in the outer element with known height
<div class="container">
<div class="inner">
<div class="text">
Lorem ipsum dolor sit amet.
</div>
</div>
</div>
* {
box-sizing: border-box;
}
body{
padding: 15px;
}
.container {
width: 300px;
line-height: 300px;
border: solid 4px blue;
.inner{
display: inline-block;
line-height: 1.25em;
vertical-align: middle;
width: 100%;
border: solid 4px green;
.text{
text-align: center;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment