CSS div 태그에서 수직으로 정렬하기

div 태그에서 수직으로 정렬하기

div 태그안의 내용을 수직으로 정렬할 때 vertical-align를 사용하는데 적용이 안 된다. 그럴 경우 아래와 같은 속성을 명시함으로써 해결할 수 있다.

1. display: table-cell (가로 중앙, 세로 중앙)

div{

width:500px;

height: 100px;

border:1px solid orange;

text-align: center;

vertical-align:middle;

display: table-cell;

}

<div><span>하하</span></div>

2. display:flex  (가로 중앙, 세로 중앙)

div{

width:500px;

height: 100px;

border:1px solid orange;

display:flex;

align-items:center; /*세로 정렬*/

justify-content:center; /*가로 정렬*/

}