본문 바로가기
프로그래밍/HTML, CSS, JavaScript

[HTML/CSS] DIV 중앙, 가운데 배치하기

by Joy [바가지] 2018. 7. 1.

DIV 중앙, 가운데 배치하는 방법

 

 

DIV를 웹화면 중앙에 배치하는 방법에 대하여 알아 보도록 하겠습니다.

블로그를 하거나 웹화면을 만들 때 content 배치를 center 또는 middle로 하고자 할 경우가 있습니다. 그런 경우 간단하게 CSS속성으로 중앙 배치를 할 수 있습니다. 

 

  핵심 CSS 태그

- position:absolute;

 → 절대 위치를 적용하기 위해 position값을 absolute로 설정 합니다.

 

- top: 50%; left: 50%;

 → 절대 위치를 위에서부터 50% 되는 지점, 그리고 왼쪽에서부터 50%되는 지점으로 설정합니다. 

 → 이렇게 설정하게 되면 중앙에서부터 해당 영역이 시작 됩니다.

 

- height:300px; width:400px;

 → DIV의 크기를 설정 합니다.

 

- margin:-150px 0px 0px -200px;

 → 중앙에서부터 시작되는 것을 div이 너비의 반, 높이의 반 위치만큼 왼쪽 그리고 위로 이동 해 줍니다.

 ※ position속성을 절대위치로 설정하고 DIV 위치를 top, left속성을 이용하여 중앙으로 설정 합니다. 그러나 DIV의 크기에 의해 정중앙 위치가 되지 않습니다. 따라서 margin 속성을 이용하여 DIV의 크기의 절반만큼 반대로 이동 시켜 주게 되면 DIV는 화면의 정중앙에 위치하게 됩니다.

또한 브라우저 크기를 조절 해 보아도 중앙을 유지하게 됩니다.

 

반응형

 

  예제소스

<!DOCTYPE html>
<html>
<head>
  <title>DIV 화면 중앙에 배치하기</title>
  <style>

    body { padding:0px; margin:0px; }

 

   #divPosition {  

     background-color: #00D8FF;
     border: 1px solid #5D5D5D;
     position:absolute;
     height:300px;
     width:400px;
     margin:-150px 0px 0px -200px;
     top: 50%;
     left: 50%;
     padding: 5px;
   }

</style>


</head>

<body>

  <div id="divPosition">
    DIV 화면 중앙에 배치하기 예제1 입니다.
  </div>

 

</body> 

</html>

 

 

 

 

 

  예제결과

HTML 중앙배치 예제 결과

 

이번 시간에는 DIV 가운데 배치하는 방법에 대하여 알아 보았습니다.

 

2018/03/22 - [프로그래밍/HTML, CSS, JavaScript] - CSS Position 속성 이해하기

2018/03/28 - [분류 전체보기] - [CSS] position:absolute 속성 예제

2018/03/24 - [프로그래밍/HTML, CSS, JavaScript] - [CSS] position:relative 속성 예제

 

 

 

반응형

댓글6