flex 속성을 활용한 중앙 정렬

세로 정렬

<div class="flex">center</div>

.flex {
    display: flex;
    width: 200px;
    height: 100px;
    align-items: center; /* 세로 정렬 */
    background: #ccc;
}

코드 결과 화면

center

---

가로 정렬

<div class="flex">center</div>

.flex {
    display: flex;
    width: 200px;
    height: 100px;
    justify-content: center; /* 가로 정렬 */
    background: #ccc;
}

코드 결과 화면

center

---

• JSFiddle 코드 보기 : https://jsfiddle.net/pilot376/po1qdk4g/16/