CSS 가운데 정렬에 대한 가이드 정보
CSS 가운데 정렬에 대한 가이드본문
홈페이지 제작에 있어서 컨텐츠를 가운데 정렬하는 것에 대한 요구는 많습니다.
고전적인 방법부터 최근 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;
}
....
위에 언급한 것 외에 더 다양한 응용 방법들이 있겠지요? ^-^
By 웹학교
3
댓글 0개