다음과 같이 재작성된 제목: Flexbox를 사용하여 요소의 수평 및 수직 중앙 정렬 달성

Question

Flexbox를 사용하여 컨테이너에서 div를 가로 및 세로 중앙에 배치하는 방법입니다. 아래 예에서는 각 숫자를 아래 중앙에(행별로) 배치하고 싶습니다.

.flex-container {
  패딩: 0;
  여백: 0;
  목록 스타일: 없음;
  디스플레이: 플렉스;
  항목 정렬: 중앙;
  내용 정당화: 센터;
}
열 {
  너비: 100%;
}
.flex-항목 {
  배경: 토마토;
  패딩: 5px;
  너비: 200px;
  높이: 150px;
  여백: 10px;
  줄 높이: 150px;
  색상: 흰색;
  글꼴 두께: 굵게;
  글꼴 크기: 3em;
  텍스트 정렬: 중앙;
}

  

    1
  
  

    2
  
  

    3
  
  

    4
  

Answer 1

Flexbox에서 요소를 수직 및 수평 중앙에 배치하는 방법

다음은 두 가지 일반적인 센터링 솔루션입니다.

수직 정렬을 위한 플렉스 아이템(flex-direction: column），另一种用于水平对齐的弹性项目（flex-direction: row).

두 경우 모두 중앙에 위치한 div의 높이는 가변적이거나 정의되지 않았거나 알 수 없거나 중요하지 않을 수 있습니다.

다음은 두 가지 모두에 대한 HTML 코드입니다.

으아악

---

CSS (장식 스타일 제외)

플렉스 항목이 수직으로 쌓인 경우:

으아악

데모

---

Flex 항목이 가로로 쌓인 경우:

위 코드의 flex-direction 규칙을 조정하세요.

으아악

데모

---

플렉스 아이템의 내용을 중앙에 배치

유연한 서식 지정 컨텍스트의 범위는 상위-하위 관계로 제한됩니다. 자식을 제외한 Flex 컨테이너의 자손은 Flex 레이아웃에 참여하지 않으며 Flex 속성을 무시합니다. 기본적으로 탄력적 속성은 자녀 외부로 상속될 수 없습니다.

따라서 flex 속성을 하위 요소에 적용하려면 항상 상위 요소에 display: flex或display: inline-flex를 적용해야 합니다.

텍스트나 기타 콘텐츠를 수직 및/또는 수평으로 중앙에 배치하려면 항목을 (중첩된) 플렉스 컨테이너로 만들고 중앙 정렬 규칙을 반복하세요.

으아악

자세한 내용은 다음을 참조하세요. Flexbox에서 텍스트를 수직으로 정렬하는 방법은 무엇입니까?

또는 플렉스 아이템의 콘텐츠 요소에 margin: auto를 적용할 수도 있습니다.

으아악

flex auto 여백에 대해 자세히 알아보세요. Flex 항목 정렬 방법 (상자 #56 참조).

---

중앙에 배치된 여러 줄 플렉스 아이템

플렉스 컨테이너에 여러 행이 있는 경우(줄 바꿈으로 인해) align-content속성은 교차 축 정렬에 중요합니다.

출처:

자세한 내용은 다음을 참조하세요. flex-wrap은 align-self, align-items 및 align-content와 어떻게 작동하나요?

---

브라우저 지원

Flexbox는 IE < 10을 제외한 모든 주요 브라우저에서 지원됩니다. Safari 8 및 IE10과 같은 일부 최신 브라우저 버전에는 vendor 접두사가 필요합니다. 접두사를 빠르게 추가하려면 Autoprefixer를 사용할 수 있습니다. 자세한 내용은 이 답변을 참조하세요.

---

오래된 브라우저를 위한 센터링 솔루션

CSS 테이블과 위치 지정 속성을 사용하는 대체 센터링 솔루션은 다음 답변을 참조하세요. https://stackoverflow.com/a/31977476/3597276

Answer 2

당신이 원하는 것은 다음과 같습니다.

으아악 으아악