전체 너비 Div 내에서 버튼을 수평 및 수직 중앙에 배치하는 방법은 무엇입니까?

100% 너비로 Div 내에서 버튼 중앙에 배치

CSS에서 일반적으로 필요한 것은 전체에 걸쳐 있는 div 내에서 버튼을 중앙에 배치하는 것입니다. 페이지의 너비. 이를 달성하기 위해 사용할 수 있는 방법에는 여러 가지가 있습니다.

한 가지 접근 방식은 Flexbox를 사용하는 것입니다. div의 표시 속성을 flex로 설정하고 justify-content: center 및 align-items: center를 추가하면 div는 하위 항목을 수직 및 수평 중앙에 배치하는 flexbox 컨테이너가 됩니다.

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
button {
  /* Other styles */
}

수직 정렬인 경우 필요하지 않으므로 justify-content: center를 사용하면 됩니다.

#wrapper {
  display: flex;
  justify-content: center;
}
button {
  /* Other styles */
}

보다 전통적인 접근 방식을 위해 버튼의 여백 속성을 자동으로 설정할 수 있습니다. 이렇게 하면 버튼이 div 내에서 수평 중앙에 배치됩니다.

button {
  margin: 0 auto;
  /* Other styles */
}

또는 div의 텍스트 정렬 속성을 중앙에 설정할 수도 있습니다. 이렇게 하면 버튼을 포함하여 div 내의 모든 요소가 중앙에 배치됩니다.

div {
  text-align: center;
}
button {
  /* Other styles */
}

이는 div 내에서 버튼을 중앙에 배치하는 몇 가지 방법일 뿐입니다. 최선의 접근 방식은 레이아웃의 특정 요구 사항에 따라 달라집니다.

위 내용은 전체 너비 Div 내에서 버튼을 수평 및 수직 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!