css

CSS로 <div> 가로/세로 중앙정렬 하기 – Cross browsing (IE8-10 NO hacks!)

핑계/ editor

  • 4 comments
  • 9,948 views
  • 2017년 9월 2일

venter-prefix도 필요없고, cross-browsing 도 되는
<div>가 항~상 가로/세로 중앙정렬이 되게 하는 방법에 대해서 알아보아요~

<div> 나 다른 웹 요소를 웹 페이지에서 ‘중앙정렬’을 하고자 할 때 ‘가로중앙정렬’ 하는 방법은 아주 쉽습니다.
가운데 오게 하고 싶은 요소의 width 값을 적어주고 margin: 0 auto; 로 써주면 쉽게 가로중앙정렬이 됩니다.
그런데 ‘세로중앙정렬’ 하는 방법은 상당히 까다롭습니다.

가장 많이 사용되는 ‘세로중앙정렬’ 방법은 아래와 같습니다.

position: absolute;
height: 100px
top: 50%;
margin-top: -50px; /* 중앙정렬하고싶은 요소의 height값의 '절반값'을 'margin-top:음수값' 으로 써줌 */

 

하지만 이렇게 써주면 전체 height 값이 변경되었을 때는, 중앙정렬 하고 싶은 요소의 margin-top 값도 같이 변경해줘야 한다는 불편함이 있습니다.
유지보수에 완전 꽝이겠죠??

그렇다고 ‘flexbox 속성’을 사용하자니 아직까지 모든 브라우저에 호환되지 않아서 vender-prefix 를 일일히 써줘야 합니다.
완전 귀찮죠???

그래서 이 모든걸 쓰지 않아도 항상 ‘가로/세로 중앙정렬’을 할 수 있는 방법에 대해서 알아보도록 하겠습니다.
이 방법은 % 값을 써야하는 반응형웹을 제작할 때 최고로 편한 방법입니다.

 

아래 예제의 흰배경박스의 우측 하단을 당겨보세요.
‘red box’가 항상 가운데에 위치하는것을 볼 수 있습니다.

HTML5AROUND on html5around.com
 
 
 

1. <div> 가로/세로 중앙정렬 하는 법 알아보기


 

① 기준이 되는 외부박스와 중앙정렬 하고싶은 내부박스를 그려줍니다

– 기준이 되는 외부박스(.guide)와 중앙정렬 하고싶은 내부박스(.center-box)를 그려줍니다.

Markup

<body>
    
</body>

CSS

.guide {
    width: 90%;             /* 임의 값 */
    height: 300px;          /* 임의 값 */
    border: 5px solid #999; /* 임의 값 */
    background: #fff;       /* 임의 값 */
    margin: 20px auto;      /* 임의 값 */
}

.center-box {
    width: 100px;
    height: 100px;
    background: red;
}

HTML5AROUND on html5around.com

 

② 외부박스와 내부박스에 position 값을 써줍니다.

외부박스(.guide)가 기준이 될 수 있게 ‘position:relative;’를 써주고
내부박스(.center-box)에 ‘position:absolute;’top: 0; left: 0; bottom: 0; right: 0; 도 써줍니다.
아직 눈으로 보기에 달라진 점은 없습니다.

CSS

.guide {
    position: relative;   /* 추가 */
    width: 90%;
    height: 300px;
    border: 5px solid #999;
    background: #fff;
    margin: 20px auto;
}

.center-box {
    position: absolute;   /* 추가 */
    width: 100px;
    height: 100px;
    background: red;
    top: 0;               /* 추가 */
    bottom: 0;            /* 추가 */
    left: 0;              /* 추가 */
    right: 0;             /* 추가 */
}

HTML5AROUND on html5around.com

내부박스(.center-box)에 top: 0; left: 0; bottom: 0; right: 0; 을 써줬기 때문에 만약에 내부박스(.center-box)에 width, height 값을 써주지 않으면 아래와 같은 상황이 발생합니다. 그래서
중앙정렬 하고 싶은 요소에 width 값과 height 값을
꼭!! 써줘야 합니다.

HTML5AROUND on html5around.com

 

③ 내부박스에 margin: auto; 를 써줍니다.

내부박스(.center-box)에 margin: auto; 를 써주면 어느쪽에도 치우치지 않고 항상 가운데에 위치하게 됩니다.

CSS

.guide {
    position: relative;   
    width: 90%;
    height: 300px;
    border: 5px solid #999;
    background: #fff;
    margin: 20px auto;
}

.center-box {
    position: absolute;   
    width: 100px;
    height: 100px;
    background: red;
    top: 0;               
    bottom: 0;            
    left: 0;              
    right: 0;             
    margin: auto;     /* 추가 */
}

HTML5AROUND on html5around.com
 
 

2. 정리


 

    1. 중앙정렬 하고 싶은 요소에 꼭 position:absolute; 를 써주고,
    2. width와 height 값을 꼭 써줍니다.
    3. top: 0; left: 0; bottom: 0; right: 0; 라고 써준 후
    4. margin: auto; 라고 써주면 끝입니다.

 
 

3. 마치며


 

예전에 세로중앙정렬 할 때 margin-top 을 사용하거나 position 을 사용해서 위치를 지정했었던 때가 생각이 나네요~
전체 height값이 변경될 때마다 값을 변경해야 되서.. 참 많이 고민했었는데.. 이번 방법을 알게 된 후 이렇게 편한 방법이 있었다는 것에 대해서 많이 놀라고 CSS 는 참으로 무궁무진 하구나 라는 생각을 했었습니다.

앞으로도 좋은 방법이 생기면 공유하도록 하겠습니다.

궁금하신 사항이 있으면 question 메뉴나, 댓글로 남겨주세요~

핑계

댓글 먹고 살아요~

4
Leave a Reply

avatar
3 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
oldbreed핑계garniedanbi Recent comment authors
newest oldest most voted
danbi
Guest
danbi

항상 골치 아팠던 부분인데, 덕분에 좋은 방법 알고 갑니다.
감사합니다 🙂

garnie
Guest
garnie

이렇게 좋은방법이..ㅜㅜ
감사합니다.

oldbreed
Guest
oldbreed

감사합니다