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 중앙배치 예제 결과

 

 

Posted by JOY [바가지]

댓글을 달아 주세요

  1. *저녁노을* 2018.07.02 06:17 신고  댓글주소  수정/삭제  댓글쓰기

    잘 알고 갑니다.
    즐거운 한 주 되세요

  2. kangdante 2018.07.02 08:13 신고  댓글주소  수정/삭제  댓글쓰기

    소스로 중앙배치를 하기도 하는군요
    잘 보고 갑니다
    오늘도 여유로운 하루되세요.. ^^

  3. 비키니짐(VKNY GYM) 2018.07.02 09:19 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 잘 보고갑니다. 한번 해봐야 겠어요^^

  4. 발랄제시카 2018.07.02 12:25 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다.

  5. 은이c 2018.07.02 12:53 신고  댓글주소  수정/삭제  댓글쓰기

    아구 어려워라~~ ㅎㅎ
    좋은 하루 보내세요~~ ^^

  6. 잉여토기 2018.07.02 23:40 신고  댓글주소  수정/삭제  댓글쓰기

    애드센스 등 광고나
    참고 이미지 배치할 때 유용한 명령어들이네요.



티스토리 툴바