HTML 부분 -

 <div class="center">
        <h1>Hello Center Div</h1>
        <img src="IMG_20210105_092229.jpg" 
        width="300px" height="300px"/>
 </div>

1. 텍스트 정렬 사용 -

 .center{
  text-align: center;
 }

출력 -

2. flex를 사용하여 div를 세로로 중앙에 -

 .center{
  display: flex;
  flex-direction: column;
  align-items: center;
}

출력 -

3. flex를 사용하여 div를 수평 중앙에 배치

 .center{
  display: flex;
  justify-content: center;
}

출력 -

4. 그리드 시스템 사용

.center{
 display: grid;
 justify-content: center;
}

산출-

5. 그리드를 사용하여 항목을 수평 및 수직으로 정렬합니다.

 .center{
  height: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  }

출력 -

6. 장소 콘텐츠 사용 -

 .center{
  height: 100%;
  display: grid;
  place-content: center;
  }

출력 -

그게 이 게시물의 전부입니다.

이 게시물을 읽어 주셔서 감사합니다. 실수를 발견하거나 제안하고 싶은 경우 댓글 섹션에 언급하십시오.

^^아래 링크에서 소정의 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^

이 글들도 확인해보세요