Div 내부에 하위 요소를 수직 중앙에 배치하는 방법은 무엇입니까?

내에서 요소를 수직으로 중앙에 배치 요소

웹 페이지 내에서 요소를 정렬할 때 창을 기준으로 요소를 정렬하는 것과 상위 컨테이너를 기준으로 정렬하는 것의 차이점을 이해하는 것이 중요합니다. 왼쪽 사용 시: 50%; 요소를 전체 창의 중앙에 배치하고 직접 상위

다른 접근 방식이 필요합니다.

내에서 세로 중심을 맞추려면 다음 단계를 따르세요.

1. text-align:center; 상위
   에 연결합니다. 이렇게 하면 모든 하위 요소가 수평으로 중앙에 정렬됩니다.
2. 하위 요소를 수직으로 중앙에 맞추려면 margin:auto;를 적용하세요. 이는 남은 공간을 균등하게 분배하기 위해 요소의 상단 및 하단 여백을 자동으로 조정하도록 브라우저에 지시합니다.

이를 보여주는 예제 HTML 및 CSS 코드:

<div>
<pre class="brush:php;toolbar:false">#parent {
  text-align: center;
}

#child {
  margin: auto;
}

이 예에서 하위 요소는 상위

내에서 수평 및 수직 중앙에 배치됩니다.