flexbox를 이용한 수직 중앙 정렬

HTML

<div class="container">
    <div class="container-item">middle 정렬</div>
</div>

 

CSS

html {
    height:100%;
    margin:0;
    padding:0;
}

body {
    height:inherit;
    margin:0;
    padding:0;
}

.container {
    height:inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px solid #000;
 }

 .container-item {
    width:30%;
    padding:10px;
    background-color:#ddd;
    text-align:center;
 }

 

Result