Vertical Center

by Raúl Rojas

HTML

<div class="vcenter">
  <p>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>

CSS

.vcenter {
  white-space: nowrap;
  height: 500px;
  border: 1px solid;
}

.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;
}