<div class="parent">
  <p class="child">縦方向中央に配置したpタグ</p>
</div>
/* 親要素 */
.parent {
  display: table;

  width: 100%;
  height: 150px;
  background: lightyellow;
}
/* 子要素 */
.child {
  display: table-cell;
  vertical-align: middle;

  border: solid blue 1px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.