반응형

css에서 가로 중앙 정렬은 정말 간단하게 해결(text-align: center;)이 되는데 세로 중앙 정렬은 생각대로 하기가 힘들다. vertical-align: center;가 생각처럼 됐으면 좋겠지만 조건이 까다로워서 안 될 때가 더 많다.

그래서 그런지 검색해보면 세로 중앙 정렬 관련해서 글이 많고 방법도 다양하다. line-height를 부모와 똑같이 맞추든지, margin을 auto로 지정하든지, 심지어는 absolute로 지정한 다음 transform을 사용하는 방법까지... 모두 자식에게 속성을 지정해야 해서 순수 텍스트 노드는 안되고 div 등으로 감싸줘야 한다.

최근에 grid를 사용해서 간단하게 중앙 정렬하는 법을 알게 돼서 소개한다. grid를 사용하기 때문에 IE는 지원하지 않지만 이제 추모비도 세워진 마당에 굳이 신경 쓸 필요가...?

.parent {
  display: grid;
  place-items: center;
}

정말 간단하다. 부모 노드에만 지정해주면 되기 때문에 자식 노드가 순수 텍스트여도 문제가 없다.

예시

<!DOCTYPE html>
<html>
  <head>
    <style>
      .parent {
        display: grid;
        place-items: center;

        width: 200px;
        height: 200px;
        border: 2px solid;
      }
    </style>
  </head>
  <body>
    <div class="parent">가운데 배치</div>
  </body>
</html>
가운데 배치

반응형

+ Recent posts