CSS 인터뷰 질문: 중앙 HTML 요소(3가지 접근법💥)

질문 ❓을 받거나 코드를 작성해야 하는 경우

Center a div vertically and horizontally OR How to perfectly center an element in a browser?

어떻게 대답하시겠습니까? 🤔 다음은 가능한 세 가지 방법입니다. 내 추천은 아래에 있습니다. 아래와 같은 HTML 마크업이 주어진 경우:

<div class="parent">
  <div class="child"></div>
</div>

접근법 #1: CSS 변환/변환
이것은 CSS Flexbox 및 Grid보다 더 나은 브라우저 🌏 지원을 제공하는 접근 방식입니다. 코드는 아래와 같을 수 있습니다.

.parent {
  position: relative;
}

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

코드펜: https://codepen.io/angelo_jin/pen/popONyX

Note: All implementation will look like below

접근법 #2: CSS 플렉스박스
이 솔루션은 CSS 그리드보다 더 나은 브라우저 지원 기능을 제공하며 이러한 브라우저에 이상적이며 기능을 지원할 수 있습니다. 컨테이너의 항목 간에 공간을 정렬하고 분배하는 보다 효율적인 방법을 제공하는 것을 목표로 하는 1차원 레이아웃을 만드는 데 좋습니다. 크기를 알 수 없거나 동적인 경우에도 중앙에 배치할 수 있습니다. 😲

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

코드펜: https://codepen.io/angelo_jin/pen/QWaVGGP



접근법 #3: CSS 그리드
이 규칙 세트는 우리가 더 이상 90년대에 있지 않기 때문에 이상적입니다. 몇 줄의 스타일만 추가하면 사용자 인터페이스를 디자인하는 방식이 완전히 바뀝니다.😊 CSS 그리드 레이아웃은 페이지를 주요 영역으로 나누거나 관계를 정의하는 데 탁월합니다. HTML 프리미티브에서 빌드된 컨트롤 부분 사이의 크기, 위치 및 레이어.

인터뷰에서 이것을 사용하려는 경우 브라우저에서 지원할 수 있는 경우 이 솔루션을 사용할 것이라고 언급하십시오. 이것은 당신이 최신의 최고의 css 사양에 주의를 기울이고 있고 예전 방식에 얽매이지 않는다는 것을 보여줄 것입니다.

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

코드펜: https://codepen.io/angelo_jin/pen/qBpMqRr



아래는 비디오 형식을 좋아하는 사람들을 위한 매체입니다.


Codepen 센터 요소 컬렉션: https://codepen.io/collection/MgJxRk
(나중에 사용할 수 있도록 북마크하는 것이 좋습니다)

훌륭한 프런트엔드 엔지니어는 CSS와 JS에 동등하게 관심을 집중하고 다재다능하며 하나의 기술에 집중하지 않습니다. 이 질문에 대한 권장 사항으로 브라우저가 지원할 수 있는 경우 CSS 그리드를 사용합니다. 그렇지 않은 경우 CSS Flexbox를 사용하면 CSS Translate가 마지막 선택이 됩니다.