CSS를 사용하여 Div 내에서 버튼을 수평 및 수직 중앙에 어떻게 배치할 수 있습니까?

Div 내에서 버튼 중앙에 배치

CSS에는 상위 요소 내에서 콘텐츠를 중앙에 배치하는 몇 가지 기술이 있습니다. div 내에서 버튼을 수평 중앙에 배치하는 가장 일반적인 접근 방식을 살펴보겠습니다.

Flexbox 사용(현대적 접근 방식)

Flexbox는 유연하고 반응성이 뛰어난 CSS 레이아웃 모듈입니다. 레이아웃. Flexbox를 사용하여 버튼을 수직 및 수평 중앙에 배치하려면:

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

고정 너비 및 여백 사용(레거시 접근 방식)

버튼에 고정 너비가 있고 상위 요소가 있는 경우 div의 너비는 고정되거나 100%입니다. 여백을 사용하여 가운데로 맞출 수 있습니다. it:

button {
  margin: 0 auto;
}

가로 센터링을 위한 대체 방법

• 텍스트 정렬: 부모의 텍스트 정렬 속성을 설정합니다. div로 "center."
• margin-left: 버튼 너비의 절반을 계산하여 왼쪽의 음수 여백으로 설정합니다.

수직 센터링

버튼을 수직 중앙에 배치하려면 상대 위치 지정을 사용하고 상단 속성을 다음으로 설정합니다. 50%. 그런 다음 버튼 자체에 position:relative를 설정합니다.

button {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

예제 코드

다음은 div 내에서 버튼을 중앙에 배치하는 HTML 및 CSS 코드 예시입니다.

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

이렇게 하면 "Hello" 버튼이 상위 요소 내에서 가로 및 세로 중앙에 배치됩니다. div.