[CSS]div안에 div를 가운데에 정렬하는 방법

보통 div에서 글을 가운데에 정렬하고 싶은 경우가 많은데 두개의 div를 사용하면 쉽게 중앙에 정렬할 수 있다.

 

# 방법 1)

 

자식 div에 inline-block을 사용하면 된다.

<style>
  .div-parent {       
    width:100%;
    text-align: center;
    padding:30px;
    background-color: darkgray;
  }
  .div-child {       
    display:inline-block;
    text-align: center;
    width:50%;
    height:200px;
    background-color: white;
  }
</style>
 
<div class="div-parent">
    <div class="div-child">
        
    </div>
</div>

결과 화면 >>

# 방법 2)

부모 div에 display:table을 설정하고

자식 div에 display:table-cell을 설정한다.

 

코드 >

<style>
  .div-parent2{
    display:table;
    width:100%;
    padding:30px;
    background-color: darkgray;
  }
 
  .div-child2{
    display:table-cell;
    text-align:center;
    background-color: white;
  }
</style>
 
<div class="div-parent2" style="margin-top:30px">
    <div class="div-child2">
        center
    </div>
</div>

결과 화면>>

정리...

 

inline-block을 사용하거나 table, table-cell 형식을 사용하면 된다