HTML DIV tag : DIV 영역 자체를 페이지의 가로 가운데에 위치시키는 방법

DIV 영역 그 자체를 페이의 가로 가운데에 위치시키려면 크게 두 가지 경우를 생각해 볼 수 있겠다.
하나는 DIV 영역에 포지션(position)을 지정한 DIV 영역이고, 또 하나는 포지션을 지정하지 않은 일반적인 DIV 영역이다.

1. 포지션을 지정하지 않은 일반적인 DIV 영역을 페이지 가운데 위치시키기
<div style="margin: 0 auto;">
내용........
</div>

[실제 예제]
<div style="background-color:gold; padding:10px; margin: 0 auto; width:300px; height: auto;">
이 곳은 DIV 영역이며, 스타일(style)의 마진(margin)에 인수를 주어 DIV 영역 그 차제가 페이지의 가로로 가운데 위치하도록 함
</div>

이 곳은 DIV 영역이며, 스타일(style)의 마진(margin)에 인수를 주어 DIV 영역 그 차제가 페이지의 가로로 가운데 위치하도록 함



2. 포지션을 지정한 DIV 영역을 페이지 가운데 위치시키기
<div style="position: absolute; top:300px; left: 50%;">
<div style="position: relative; left: -50%; ">
내용.........
</div>
</div>

[실제 예제]
<div style="position: absolute; top:690px; left: 50%;">
<div style="position: relative; left: -50%; background-color: #ddd; padding:10px;">
이 곳은 DIV 영역이며, 영역에 포지션(position)을 지정하였고, 영역이 페이지의 가로로 가운데에 위치하도록 스타일(style) 속성을 주었다
</div>
</div>

이 곳은 DIV 영역이며, 영역에 포지션(position)을 지정하였고, 영역이 페이지의 가로로 가운데에 위치하도록 스타일(style) 속성을 주었다






HTML DIV tag: 세로 정렬하는 방법 - 세로 가운데 정렬, 세로 아래쪽 정렬 - position: relative, position: absolute

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...


도움이 되기를 바랍니다.