flexbox

flexbox는 두 축을 따라 요소를 정렬하기위한 우아한 솔루션을 제공합니다. div : #래퍼 {내에서 수평 및 수직으로 버튼을 중심으로 디스플레이 : Flex; 정렬 구조 : 센터; 정당화 컨텐츠 : 센터; }

수평 센터링 만 요구되면 정당한 컨텐츠 속성을 사용할 수 있습니다 :

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

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

flexbox가 없으면 마진을 사용하여 버튼을 중심으로 할 수 있습니다. 마진 : -20px -50px; / * 중앙으로 오프셋 */ 위치 : 상대; 상단 : 50%; 왼쪽 : 50%; }

수평 센터링 만 사용하면이 두 가지 접근 방식 중 하나가 사용될 수 있습니다. 버튼

button {
  margin: -20px -50px; /* Offset to center */
  position: relative;
  top: 50%;
  left: 50%;
}