Vertical center layout

Example use cases

• Application login forms

Code output

Open layout in new window

HTML markup

The code snippet below contains only the content segment of the layout, excluding the header and footer segments.

<!-- HEADER SEGMENT -->

Copy<div class="content content-vertical-center">
  <div class="content-item">
    <div class="content-overflown">
      <div class="container-xs">
        <div class="box pad-lg">
          <h3 class="text-center">Vertical center layout</h3>
          <p class="text-center">Vertically centered content</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- FOOTER SEGMENT -->