두 줄 이상 텍스트 세로 중앙 정렬하는 방법

한 줄 짜리 간단한 텍스트는 line-height이나 padding 값 등등으로 중앙 정렬을 얼추 맞출 수 있다.

 

<style>
 .box {
      width: 300px;
      height: 300px;
      line-height: 300px;
      text-align: center;
      border: 1px solid #000;
    }
</style>

<div class="box">안녕하세요</div>

 

 

 

텍스트가 2줄 이상이 되면 어떨까. line-height 를 적용하면 참변을 당한다. padding이나 margin으로 얼추 맞추는 것도 가능하겠지만, 길이가 서로 다른 여러개의 텍스트 박스를 정렬해야할 경우엔 맞추기가 어렵다. 일일이 하나하나 패딩값을 주기도 어려움. 이럴때 사용하는 세로 중앙 정렬 방법들을 소개한다.

 

 

1. position으로 50%, 50% 정렬 후 transform 하기

position으로 top과 left를 각각 50%로 적용하면 텍스트의 시작점이 중간으로 온다. 텍스트 길이에서 반 만큼 땡겨와야 정확히 중간 지점을 찾을 수 있다.

 

하지만 이 방법으로도 완벽한 중앙정렬은 어렵다. 텍스트가 시작하는 지점이 중앙에 위치하기 때문에 텍스트 자체가 정중앙 보다는 중앙 아래로 자리잡은 것을 확인할 수 있다. 포지션 값을 일정 조절하거나 텍스트의 height값을 확인해서 calc(50% - height값) 으로 조절하면 가능해지나, 이 또한 완벽한 방법이라 할 수 없다..

 

 

 

2.  table-cell로 중앙 정렬하기

박스 영역에 display: table 값을 적용하고 텍스트는 table-cell로 적용한다. 개인적으로 이 방법이 제일 깔끔하다고 생각해서 자주 쓰고 있다.

 

 

세로 정렬 뿐만 아니라 가로 정렬이 필요할땐 table 속성이 다소 까다로울 수 있는데, 그럴때는 아래 코드와 같이 다른 div를 생성해 따로 싸주면 좋다.

 

<style>
    .box_wrap {
      width: 300px;
      height: 300px;
      border: 1px solid #000;
    }

    .box {
      display: table;
      width: 50%;
      height: 100%;
      margin: 0 auto;
    }

    .box p {
      display: table-cell;
      vertical-align: middle;
    }
</style>

<div class="box_wrap">
  <div class="box">
    <p>
      동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세
    </p>
  </div>
</div>

 

예전에는 이 table 속성을 이용해 자주 퍼블리싱을 했었는데, 요새는 사실상 자주 쓰지 않고 있다. 테이블이 정렬은 깔끔하게 되나, 스타일을 수정하려고 하면 바꾸기가 다소 난해하기 때문..

 

 

3. flex로 세로 가로 정렬 완성!!!

요즘 가장 많이 쓰는 방법은 바로 flex!!

flex 효과 중 익스에서 안먹히는 것들이 있어 초기에는 자주 안 썼으나, 요새는 대부분의 업체에서 익스를 무시하는 경향이 있어 그냥 flex를 자주 쓰고 있다.

 

 

flex를 쓰면 모든 고민이 해결된다. 이것저것 해볼 필요없다 그냥 flex를 활용하자!!