flex와 grid에 대해 공부했으니 정렬에 대해 조금 더 알아보자.
요소 가운데 정렬
div 정 중앙에 요소를 정렬하는 방법을 알아보자.
코드
CSS
.box {
display: flex;
align-items: center;
justify-content: center;
}
.box div {
width: 100px;
height: 100px;
}
HTML
<div class="box"> <div></div> </div>
기본 예시
⭐⭐⭐
display: flex; 대신 display: grid;를 사용해도된다.
그리고 정렬하는 속성인 align-items: center; justify-content: center;를 사용하면 상위 요소의 정 중앙에 정렬 된다.
위의 코드를 응용해서 div가 아닌 다른 코드에도 적용시킬 수 있다.
참고
MDN Web Docs - Box alignment for block, absolutely positioned and table layout
공부 목적 블로그