[HTML/CSS] 컨텐츠 요소 가운데 정렬하는 방법

1.  Margin을 이용해서 수평 가운데 정렬하기

    //수평 가운데 정렬
    display: block;
    margin-top: 30px; 
    margin-left: auto; 
    margin-right: auto;

 

2. text-align 속성을 이용한 가운데 정렬 (인라인 요소 정렬)

 

.center {
        text-align: center;
    }
    
/*
<div class="center">
    <!-- 가운데로 정렬하고자 하는 내용 -->
    <!-- 한 줄인 요소에만 해당됨 -->
</div>
*/

 

3. Flexbox 속성을 이용한 가운데 정렬

 

display flex 속성을 사용하면 여러 상황에서 중앙 정렬이 매우 편리하다. 

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

 

4. div 요소 안의 div 가운데 정렬

  .outbox{
  	text-align: center;
  }
  
  .inbox{
  	display: inline-block;
  }

 

이러한 느낌으로 가운데 정렬이 된다. 

 

5. Position으로 가운데 정렬하기 

.outbox{
	position: relative;
}

.inbox{
	position: absolute;
	transform: translate(-50%, -50%);
    top: 50%;
	left: 50%;
}