[CSS] 박스 세로 가운데 중앙 정렬 6가지 css 정렬 html 정렬 center middle

2020. 3. 3. 18:51

박스 내의 텍스트가 아닌 박스 자체를 ( ex) 팝업 ) 세로 중앙(가운데) 정렬시키는 방법.
position:absolute의 경우 부모가 position:relative를 가지고 있다는 전제하에 작성.

텍스트의 세로 중앙정렬은
따로 정리해놓았다.
https://blog.naver.com/kira4195/221182885666

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 이하는 적용되지 않는다.

-ms- 없이도 IE9 작동하던데 음... 여하튼 IE9까진 쓰려면 쓸 수는 있다!

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 이하는 작동하지 않는다.

* 정리

- 박스를 정렬할 때 글자를 정렬할 때의 방법도 쓰므로, 사실 정확히 텍스트 정렬할 때와 박스 정렬할 때를 나눈다는 건 조금 무리였나도 싶다. :< 어쨌든 상황에 맞게 잘 찾아 쓰는데 도움이 되기를..!

출처 : https://m.blog.naver.com/kira4195/221161971714

출처 : http://aboooks.tistory.com/180

출처 : http://webdir.tistory.com/31

저작자표시 비영리

'프론트엔드 개발 놀이터 > css, design' 카테고리의 다른 글

SVG 다루기 (0)	2020.03.06
Base64 이미지 사용하기 (0)	2020.03.05
Lottie (로티) json 애니메이션 (0)	2020.02.28
Flat Color Hex Codes (0)	2020.02.27
파비콘(Favicon)의 모든 것 (0)	2020.02.24

내나라(nenara.com)