CSS를 사용하여 텍스트를 수직 가운데정렬 하는 방법

질문 : CSS를 사용하여 텍스트를 세로 중앙에 어떻게 배치합니까?

---

나는이 <div> 텍스트가 포함 된 요소를 나는 이것의 내용을 정렬 할 <div> 수직 센터.

<div> 스타일은 다음과 같습니다.

 

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

<div id="box">
  Lorem ipsum dolor sit
</div>

이 목표를 달성하는 가장 좋은 방법은 무엇입니까?

답변

---

이 기본 접근 방식을 시도 할 수 있습니다.

 

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello World!
</div>

단 한 줄의 텍스트에서만 작동합니다. 그 이유는 줄의 높이를 포함하는 상자 요소와 같은 높이로 설정했기 때문입니다.

---

보다 다재다능한 접근 방식

이것은 텍스트를 세로로 정렬하는 또 다른 방법입니다. 이 솔루션은 한 줄과 여러 줄의 텍스트에 대해 작동하지만 여전히 고정 높이 컨테이너가 필요합니다.

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Hello World!</span>
</div>

CSS는 단지 크기 <div> 수직 중심 춥니 <span> 설정에 따라 <div> 높이 동등의 라인 높이와 수 <span> 와 인라인 블록 vertical-align: middle . <span> 대한 line-height를 다시 정상으로 설정하여 내용이 블록 내부에서 자연스럽게 흐르도록합니다.

---

테이블 표시 시뮬레이션

display: table 및 display: table-cell (기본적으로 Internet Explorer 7 만 해당)을 지원하지 않는 이전 브라우저에서는 작동하지 않을 수있는 또 다른 옵션입니다. CSS를 사용하여 테이블 동작을 시뮬레이션하고 (테이블이 세로 정렬을 지원하므로) HTML은 두 번째 예제와 동일합니다.

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Hello World!</span>
</div>

---

절대 위치 지정 사용

이 기술은 위, 아래, 왼쪽 및 오른쪽을 0으로 설정하는 절대 위치 요소를 사용합니다. 자세한 내용은 Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS 의 기사에서 설명합니다.

div {
  display: flex;
    justify-content: center;
      align-items: center;
        height: 100px;
          width: 100%;
            border: 2px dashed #f69c55;
            }

<div>
              <span>Hello World!</span>
              </div>

출처 : https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css