div 블록 내에서 텍스트를 가로 및 세로 가운데에 배치하는 방법은 무엇입니까?

Question

<p><code>div</code> <code>display:block</code>로 설정합니다. (90px height 및 width), 그 안에 텍스트가 있습니다.

<p>我需要文本은 垂直와 平方向上居中对齐。</p> <p><code>text-align:center</code>도 해봤는데 세로 센터링 부분이 안되어서 <code>vertical-align:middle</code>도 해봤는데, 작동하지 않았습니다.</p> <p>유무한 법이 있나요?</p>

Answer 1

2014년 현재 일반적으로 사용되는 기술:

---

• 접근법 1 - transform translateX/translateY:

  예시 / 전체화면 예시

  지원되는 브라우저(대부분)에서 top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%)를 사용하여 요소를 동적으로 수직/수평 중앙에 배치할 수 있습니다.

  으아아아

---

• 방법 2 - Flexbox 방법:

  예시 / 전체화면 예시

  지원되는 브라우저에서 가로 중심에 display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center를 설정하세요. 추가 브라우저 지원을 위해 공급업체 접두사를 추가하는 것을 잊지 마세요(예제 참조).

  으아아아

---

• 접근 방법 3 - table-cell/vertical-align: middle:

  예시 / 전체화면 예시

  어떤 경우에는 html/body element's height is set to 100%.

  세로 정렬의 경우 상위 요소의 width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.

  을 설정하세요.

  수평 센터링의 경우 text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto assuming the element is block레벨을 추가할 수 있습니다.

  으아아아

---

• 접근법 4 - 변위를 사용하여 위에서부터 50%절대적으로 위치 지정:

  예시 / 전체화면 예시

  이 접근 방식은 텍스트에 알려진 높이가 있다고 가정합니다. 이 경우 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -9px.

  으아악

---

• 접근 방법 5 - line-height 방법(가장 유연하지 않음 - 제안되지 않음):

  예시

  어떤 경우에는 상위 요소의 높이가 고정되어 있습니다. 수직 중앙 정렬의 경우 하위 요소의 line-height 값을 상위 요소의 고정 높이와 동일하게 설정하기만 하면 됩니다.

  이 솔루션은 어떤 경우에는 작동하지만 여러 줄의 텍스트가 있는 경우에는 작동하지 않는다는 점에 유의할 가치가 있습니다. 이렇게 .

  으아악

---

방법 4와 5는 가장 신뢰할 수 없습니다. 상위 3개 중 하나를 선택하세요.

Answer 2

한 줄의 텍스트 및/또는 이미지라면 쉽습니다. 그냥 사용하세요:

으아아아

그렇습니다. 여러 줄이 될 수 있다면 조금 더 복잡해집니다. 하지만 http://pmob.co.uk/에 해결책이 있습니다. "수직 정렬"을 찾으십시오.

해킹하거나 복잡한 div를 추가하는 경향이 있기 때문에... 저는 보통 단일 셀이 있는 테이블을 사용하여 작업을 수행합니다... 최대한 단순하게 유지합니다.

---

2020년 업데이트:

Internet Explorer 10과 같은 이전 브라우저에서 작동하도록 해야 하는 경우가 아니면 Flexbox를 사용할 수 있습니다. 이 는 현재의 모든 주요 브라우저 에서 널리 지원됩니다. 기본적으로 컨테이너는 플렉스 컨테이너로 지정되어야 하며 주 축과 교차 축을 따라 중심에 있어야 합니다.

으아아아

"플렉스 항목"이라고 하는 하위 항목의 고정 너비를 지정합니다.

으아아아

예: http://jsfiddle.net/2woqsef1/1/

콘텐츠를 축소하려면 훨씬 더 간단합니다. 플렉스 항목에서 flex: ... 줄을 제거하면 자동으로 축소됩니다.

예: http://jsfiddle.net/2woqsef1/2/

위 예시는 MS Edge, Internet Explorer 11 등 주요 브라우저에서 테스트되었습니다.

사용자 정의해야 하는 경우 한 가지 기술 참고 사항: Flex 항목 내부에서는 이 Flex 항목이 Flex 컨테이너 자체가 아니기 때문에 CSS의 이전 비 Flexbox 방식이 예상대로 작동합니다. 현재 Flex 컨테이너에서는 두 개의 Flex 항목이 가로로 배치됩니다. 세로로 배치하려면 Flex 컨테이너에 flex-direction: column;를 추가하세요. 이것이 Flex 컨테이너와 해당 immediate 하위 요소 사이에서 작동하는 방식입니다.

중앙 정렬을 수행하는 다른 방법이 있습니다. 플렉스 항목에 center for the distribution on the main and cross axis for the flex container, but instead specify margin: auto를 지정하지 않아 네 방향 모두에서 추가 공간을 모두 차지하고 균등하게 분산된 여백으로 인해 플렉스 항목이 모든 방향에서 중앙에 배치됩니다. 또한 이 기술은 MS Edge에서는 작동하지만 Internet Explorer 11에서는 작동하지 않습니다.

---

2016/2017 업데이트:

이 작업은 transform를 사용하여 더 일반적으로 수행할 수 있으며 Internet Explorer 10 및 Internet Explorer 11과 같은 이전 브라우저에서도 잘 작동합니다. 여러 줄의 텍스트를 지원할 수 있습니다.

으아아아

예: https://jsfiddle.net/wb8u02kL/1/

수축 포장 너비:

위 솔루션은 콘텐츠 영역에 고정 너비를 사용합니다. 수축 포장 너비를 사용하려면

를 사용하세요. 으아아아

예: https://jsfiddle.net/wb8u02kL/2/

Internet Explorer 10에 대한 지원이 필요한 경우 Flexbox는 작동하지 않으며 위의 방법과 line-height 방법이 작동합니다. 그렇지 않으면 Flexbox가 그 일을 할 것입니다.