<div class="container">
  <div class="wrapper">
    <div class="box">
      box
    </div>
  </div>
</div>
.container {
    display: table;
    height: 300px;	/* 높이 지정 */
    width : 100%;	/* 너비 지정 */
    background:#aeaeae; /* 배경색 지정 */
}

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

.box {
    height: 100px;	/* 박스 높이 지정 */
    width: 100px;	/* 박스 너비 지정 */
    background: #000;	/* 박스 위치 확인을 위한 배경색 지정 */
    margin: 0 auto;	/* 상,하단 margin : 0 | 좌, 우 margin :auto */
    color : #fff;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.