CSS를 사용하여 요소의 중심을 맞추는 방법

반응형

웹 개발자가 할 수 있는 가장 어려운 일은 가로 세로로 중심을 맞추는 것입니다. 중심화 요소는 웹 개발에서 흔히 볼 수 있으며, 그 일을 완수하기 위한 수많은 방법들이 있다.

다음은 CSS를 사용하여 요소의 중심을 맞추는 몇 가지 방법입니다.

텍스트 정렬 접근 방식

가장 일반적인 가운데 맞춤 방법은 텍스트를 가운데에 맞추는 것입니다. 즉, 상위 요소를 텍스트 정렬(중앙 및 표시할 하위 요소)로 설정합니다. 인라인 블록.

꽤 설명이 잘 되네요

 

(클래식) 절대적 접근법

요소의 중심을 맞추는 일반적인 방법은 상위 요소를 절대(또는 고정)로 설정하고 상단 및 왼쪽 속성을 50% 설정하는 것입니다.

요소를 다른 방향으로 이동하려면 변환 특성을 사용하여 x축과 y축을 -50% 변환합니다.

최종 코드는 다음과 같습니다.

.wrapper {
      position: absolute;
      top: 50%;
          left: 50%;
              transform: translateX(-50%, -50%);
}

 

이전에는 이 복잡한 해킹이 금본위제였다. 그러나 2009년에 CSS는 플렉스박스를 선보였다.

Flexbox 접근 방식

이 접근법에서는 상위 요소를 유연한 열 또는 행으로 설정한 다음 정렬 항목 및 맞춤 내용을 사용하여 하위 요소를 중앙에 정렬하고 정당화한다.

한 가지 유의할 점은 항목 정렬은 수직 중심 맞추기이고 정당화 내용은 수평 중심 맞추기입니다.

.wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
}

 

하지만 적은 코드로 div block의 중심을 잡을 수 있다면 어떨까요? 그리드가 들어가는 곳이고 생각보다 짧습니다.

(두 줄의) 그리드 접근 방식

여기 요소의 중심을 잡는 더 짧은 방법이 있습니다. 상위 요소를 그리드로 정의하고 안쪽에서 가운데로 항목을 배치하도록 지시합니다.

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

봤지? 더 짧잖아.

 

이 짧은 게시물이 유익하고 도움이 되었기를 바라며, 이에 대한 여러분의 생각을 듣고 싶습니다. 읽어주셔서 감사합니다!

원천

• 코드그리드. (2020년 4월 3일). CSS에서 텍스트를 가로 및 세로로 가운데 정렬하는 방법. 중간의 (https://medium.com/@codegridweb/텍스트 중심 지정 방법-css-67e24ceb573f)
• 화력선. (2021). CSS [YouTube Shorts]로 DIV를 중앙에 배치하는 상위 3가지 방법. 유튜브에서. (https://www.youtube.com/watch?v=njdJeu95p6s)
• Sun, S. (2020년, 8월 3일). 스타일이 있는 중심 CSS: 방법. 중간, 프로그래밍 개선. (pub://better programming.pub/style-in-css-dc87b7542689)

2021년 6월 17일 미디엄에 처음 게시되었습니다.