HTML/CSS DIV IMG 및 텍스트 가운데 정렬하기

HTML/CSS DIV IMG 및 텍스트 가운데 정렬하기

div 안에서 이미지 및 텍스트를 가로 및 세로 중앙 정렬하기

<style>

#imgOuter { display:table; }

#imgLayer {

display:table-cell;

text-align:center;

vertical-align:middle;

line-height:0;

width:300px;

height:300px;

border:1px solid #222222;

overflow:hidden;

}

#txtOuter { display:table; }

#txtLayer {

display:table-cell;

text-align:center;

vertical-align:middle;

line-height:0;

width:300px;

height:300px;

border:1px solid #222222;

overflow:hidden;

}

</style>

<div id="imgOuter">

<div id="imgLayer">

<img src="test.png" />

</div>

</div>

<br/>

<div id="txtOuter">

<div id="txtLayer">

가로 및 세로 텍스트 가운데 정렬하기

</div>

</div>

아래 처럼 중앙정렬이 되어 보여진다.

가로 및 세로 텍스트 가운데 정렬하기

부모 div 에 display:table;

display:table-cell;text-align:center;vertical-align:middle;line-height:0; 가 핵심이다.