홈페이지 제작에 있어서 컨텐츠를 가운데 정렬하는 것에 대한 요구는 많습니다.

고전적인 방법부터 최근 CSS 속성 이용까지... 이 부분은 참 많이 좋아졌습니다.

 

<div>내용</div>

 

1. margin을 이용한 멋진 중앙 정렬

 

<div class="c-center">내용</div>

 

.c-center{

 max-width: fit-content;

 margin-inline: auto;

}

 

2. flexbox를 이용한 정렬

 

<div class="c-center">내용</div>

 

.c-center{

 display: flex;

 justify-content: center;

 align-items: center;

}

 

3. viewport를 이용한 정렬

 

<div class="c-center">내용</div>

 

.c-center{

  position: fixed;

  inset: 0px;

  width: 12rem;

  height: 5rem;

  max-width: 100vw;

  max-height: 100dvh;

  margin: auto;

}

 

4. viewport를 이용한 정렬(크기를 모를 경우)

 

<div class="c-center">내용</div>

 

.c-center{

  position: fixed;

  inset: 0px;

  width: fit-content;

  height: fit-content;

  margin: auto;

}

 

5. grid를 이용한 정렬

 

<div class="c-center">내용</div>

 

.c-center{

  display: grid;

  place-content: center;

}

 

....

 

위에 언급한 것 외에 더 다양한 응용 방법들이 있겠지요? ^-^

 

 

웹학교 무료강좌 / 웹학교 컨텐츠몰 / PHP포탈

By 웹학교