<!-- top -->
<div class="container">
  <div class="wrapper1">
    <div class="box">
      top
    </div>
  </div>
</div>
<br>

<!-- middle -->
<div class="container">
  <div class="wrapper2">
    <div class="box">
      middle
    </div>
  </div>
</div>
<br>

<!-- bottom -->
<div class="container">
  <div class="wrapper3">
    <div class="box">
      bottom
    </div>
  </div>
</div>
<br>

.container {
    display: table;
    height: 300px;  /* 높이 지정 */
    background:#aeaeae; /* 배경색 지정 */
}

.wrapper1 {
    display: table-cell;
    vertical-align: top;
}

.wrapper2 {
    display: table-cell;
    vertical-align: middle;
}

.wrapper3 {
    display: table-cell;
    vertical-align: bottom;
}

.box {
    height: 100px;  /* 박스 높이 지정 */
    width: 100px;   /* 박스 너비 지정 */
    background: #000;   /* 박스 위치 확인을 위한 배경색 지정 */
    color:#fff;
}