홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
[CSS] 박스 세로 가운데 중앙 정렬 6가지
1년 전
1. position: absolute; 50%로 밀고 px로 당기기.
//html 1번~3번
<div class="box">
저는 부모의 세로 중앙에 위치할 예정입니다 :D
</div>
//css
.box {
position:absolute;
top:50%; left:50%;
margin-top:-100px; margin-left:-100px;
width:200px; height:200px;
}
※ 가운데 정렬시키고 싶은 대상을 왼쪽, 위로부터 반(50%) 위치로 밀어낸 후 대상의 크기 절반 값만큼 당기는 방법. 가장 통상적인(?) 방법.
- 장점 : 막힘없는 하위 버전 호환.
- 단점 : 대상의 width, height 값이 유동적이지 않다. (px로 고정 후 반 길이만큼 당겨주어야 하므로!!)

​2. position: absolute; 50%로 밀고
translate으로 당기기.
//css
.box {
position:absolute;
top:50%; left:50%;
transform: translate(-50%, -50%);
}
※ 마찬가지로 반(50%) 위치로 밀어낸 후 대상의 크기 절반 값만큼 당기는 방법.
- 장점 : width와 height가 고정되지 않아도 사용 가능하다.
- 단점 : transform의 크로스 브라우징이 안 좋다. prefix 필요. IE 8 이하는 적용되지 않는다.

3. position 모든 방향에서 당기는 방법.
//css
.box {
position:absolute;
top:0; left:0; bottom:0; right:0;
height:10%; // 임의로 준 크기.
margin:10% auto;
}
※ div를 모든 방향에서 당긴 후( 이때 div는 전 화면에 꽉 차게 된다.) height 값을 주면 전체 부모의 가운데에 위치하게 됨.
- 장점 : 크기가 가변적인 박스를 세로 중앙 정렬할 수 있다.
- 단점 : IE7 이하는 작동하지 않는다.

​4. table-cell로 만들어 세로 중앙 정렬 시키기.
//html
<div class="wrapper">
<div class="box">
<div>저는 부모의 세로 중앙에 위치할 예정입니다 :D</div>
</div>
</div>
//css
.wrapper {
display:table;
}
.box {
display:table-cell;
vertical-align:middle;
}
※ 전체 감싼 박스를 table로 만든 후 안의 박스를 table-cell로 만들어 그 안의 개체를 vertical-align:middle로 중앙 정렬 시키는 방법. 한 줄에 여러 요소를 넣어야 할 때는 display: table 대신 display: inline-table을 사용할 수도 있다.
- 장점 : 크기가 가변적인 박스를 세로 중앙 정렬할 수 있다.
.wrapper의 공간이 없어도 내용이 잘리지 않는다.
- 단점 : IE7 이하는 작동하지 않는다. 약간 태그 단계가 깊어진다.

5. float 속성을 이용하는 방법.
//html
<body>
<div id="floater"></div>
<div id="box"> Content Here </div>
</body>
//css
body { height: 500px; }
#floater {
float:left;
height:50%;
margin-bottom:-120px;
}
#box {
clear:both;
height:240px;
position:relative;
}
※ floater라는 보이지 않는 div를 body의 50%의 높이를 갖게 한다. 그 바로 아래에 clear 속성을 넣은 box가 위에 floater밑으로 오게하면 자기 크기의 반만큼 중간에서 floater의 margin으로 당겨지게 된다.
* margin-top 이나 margin-left는 음수 값으로 당기면 스스로가 그 방향으로 당겨지지만, right나 bottom은 본인이 아닌 그 다음에 오는 요소가 당겨지게 한다.
- 장점 : 모든 브라우저에서 작동한다.
- 단점 : 공간이 좁을 땐 콘텐츠가 잘리고 스크롤바가 나타난다.

6. :before로 가상 콘텐츠를 넣어 중앙 정렬 시키기.
//html
<div class="wrapper">
<div class="box"> 저는 부모의 세로 중앙에 위치할 예정입니다. :D</div>
</div>
//css
.wrapper {
height: 100%;
text-align: center;
}
.wrapper:before {
content: ""; display: inline-block;
width: 1px; height: 100%;
margin-right: 0; vertical-align: middle;
}
.box {
display: inline-block; vertical-align: middle;
}
※ 100% 높이를 가진 부모의 앞에, 100% 높이를 가진 박스 하나를 놓는다. 그 박스에 vertical-align:middle을 줘서 그 안의 박스가 세로 가운데 정렬 되도록 하는 것.
- 장점 : 크기가 가변적인 박스를 세로 중앙 정렬할 수 있다.
- 단점 : IE7 이하는 작동하지 않는다.

추천추천 : 44 추천 목록
번호 제목
3,033
 PHP 정규식 정리
3,032
 PHP 정규식을 활용한 태그 및 특정 문자열 제거 및 추출 방법
3,031
 php 크롤링 또는 파싱 함수, 정규식 모음
3,030
 제이쿼리 기본 명령어
3,029
 웹페이지 가로 모드세로 모드 인식하기
3,028
 모바일 웹 화면 강제 회전(가로모드 고정)
3,027
 [HTML5]에서 frameset 대체 방법과 iframe 속성
3,026
 HTML <Audio> 사용법
3,025
 윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
3,024
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,022
 CSS Layout 수평 & 수직 정렬
3,021
 여러 도메인들 간 쿠키 공유하기
3,020
 태그 사이에 있는 텍스트를 추출
3,019
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,018
 쿠키 생성,가져오기,삭제
3,017
 사용자 함수 모음
3,016
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,015
 [HTML5] <video> - DOM으로 제어하기
3,014
 HTML5 video 태그에서 영상 좌우반전
3,013
 PHP - 특정 태그 및 문자열 추출, 제거
3,012
 [PHP] define과 defined의 차이
3,011
 우클릭 완벽차단 스크립트
3,010
 iframe 높이 100% 맞추기
3,009
 curl 함수를 이용한 HTTP REFERER 변경
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.