[CSS] div 가운데 정렬방법 ( 가로, 세로 / 수직, 수평)

출처 : https://dev-syhy.tistory.com/24

 

1. 가로(수직) 가운데 정렬 (block)

 

- margin-left와 margin-right를 auto로 설정하면 가로로 가운데 정렬할 수 있다.

 

1 2 3 4 5 6 7 8 9 10 11 12

<style>   .div-center {     display: block;         margin-left: auto;     margin-right: auto;     background-color: burlywood;     text-align: center;   } </style> <div class="div-center" style="width: 400px"> dev-syhy </div>

결과화면 >>

 

2. 가로(수평) 가운데 정렬 (inline-block)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<style>   .div-parent {            text-align: center;       background-color: coral;     text-align: center;    }       .div-child {        display: inline-block;       background-color: aqua;     text-align: center;   } </style> <div class="div-parent">     <div class="div-child" style="width:400px"> dev-syhy</div> </div>

결과화면 >>

3. 가로(수평) 가운데 정렬 : 너비를 알고 있을 경우 사용

- 가운데로 정렬될 요소의 너비를 알고 있으면 left을 50%, margin-left (너비 * -0.5)로 주면

가로로 가운데 정렬할수 있다.

 

대신, 부모 자식 div는 다음과 같이 설정한다.

 

부모 div는 position:relative;

자식 div는 position:absolute; 

 

* {box-sizing:border-box;}
.container {width:960px; height:600px; margin:auto; padding:20px; background:#ddd; position:relative;}

.center_box {
width:400px; 
height:200px; 
background:green;
color:#fff;
position:absolute; 
top:50%; 
left:50%; 
margin-top:-100px; 
margin-left:-200px;
}

(3번은 본인이 추가함.)

 

 

4. 세로(수직) 가운데 정렬 : 높이를 알고 있을 경우 사용

- 가운데로 정렬될 요소의 높이를 알고 있으면 top을 50%, margin-top을 (높이 * -0.5)로 주면

세로로 가운데 정렬할 수 있다.

 

대신, 부모 자식 div는 다음과 같이 설정한다.

 

부모 div는 position:relative;

자식 div는 position:absolute; 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<style>   .div-parent-height {                  position: relative;              background-color: coral;           text-align: center;     }        .div-child-height {           position: absolute;           top: 50%;           height: 100px;           margin-top: -50px; /* (높이 * -0.5) */           background-color: aqua;           text-align: center;     } </style> <div class="div-parent-height" style="height: 400px">     <div class="div-child-height">         dev-syhy     </div> </div>

결과화면 >>

5. 세로(수직) 가운데 정렬 : 높이를 모를때 사용

가운데로 정렬될 요소의 높이를 모를는 경우는

top:50%;

transform:translateY(-50%)

 

이렇게 주면 세로로 가운데 정렬해서 사용할 수 있다.

1 2 3 4 5 6 7 8 9 10

<style>   .div-height-none {            top: 50%;     transform: translateY(-50%);     background-color: aqua;     text-align: center;   } </style> <div class="div-height-none"> dev-syhy </div>

결과화면 >>