<div class="box-wrapper">
  <div class="box middle">
     <p>ダミーテキスト</p>
  </div>
  <div class="box top">
     <p>ダミーテキスト</p>
  </div>
  <div class="box bottom">
     <p>ダミーテキスト</p>
  </div>
</div>
.box-wrapper{
  display: table;
  height: 200px;
}

.box{
  width: 300px;
  background-color: #66b6d5;
  display: table-cell;
  border: 1px #fff solid;
}

.box.middle{
  vertical-align: middle;
}

.box.top{
  vertical-align: top;
}

.box.bottom{
  vertical-align: bottom;
}

p{
  color: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.