프로그래밍 공부 일기

2020년 6월 30일 Progate Lv.148
포트폴리오 작성 중
종횡 방향으로 중앙에 맞춘다.

목표물

아래 사진처럼 요소를 중간에 배치하고 싶다. 가로로 가운데로 하기 위해서는 text-align: center; 의 방법이 있지만, 이번은 부모 요소에 대해서 어느 가운데에 배치한다.

코드

부모 요소에 display:flex 와 justify-content: center , align-items: center 를 추가한다.

align-items 속성: 플렉스 아이템의 교차 축 방향으로 아이템의 배치를 제어합니다.
justify-content 속성: 플렉스 아이템의 스핀들 방향의 정렬 위치를 지정합니다.

HTML 파일

<div class="parent">
  <div class="children">
    <!-- コード -->
  </div>
</div>

CSS 파일

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