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

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

 

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

 

<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)

<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. 세로(수직) 가운데 정렬 : 높이를 알고 있을 경우 사용

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

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

 

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

 

부모 div는 position:relative;

자식 div는 position:absolute; 

 

<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>

결과화면 >>

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

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

top:50%;

transform:translateY(-50%)

 

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

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

결과화면 >>