CSS 가운데 맞춤 방법

CSS는 미세한 차이로 가득 차 있어 초보자에겐 당혹스러울 수 있다.지난 20년 동안 개발자들은 구조를 구축하는 많은 방법을 생각해 내지 않을 수 없었다. 언어의 발전에 따라 우리는 점점 더 좋은 해결 방안을 얻었다.
나는 최근에 몇 가지 해결 방안을 사용할 수 없는 나쁜 종류에 섞어 놓았기 때문에 지금 나는 더욱 유용한 방식으로 사용할 진정한 모델을 설명할 것이다


제이콥 파리스🇨🇦

안녕하세요, 드디어 CSS의 중심 문제를 해결했습니다.
2020년 4월 1일 새벽 3:36

텍스트 정렬 방법

용기의 모든 텍스트를 가운데로 하려면 css 규칙 text-align: center; 을 사용하십시오.
이것은 텍스트처럼 흐르는 모든 내연 요소에 적용될 것이다

<div style="text-align: center">
  This will center all inline elements

  <br />

  <span>
    Spans are inline elements by default
  </span>

  <br />

  <div style="display: inline-block;">
    Inline blocks are also affected
  </div>
</div>

여기의 예: https://codepen.io/jacobparis/pen/BaNEbVQ

선고도법

텍스트를 수직으로 가운데로 배치하려면 vertical-align: middle; 규칙을 사용합니다.주의해야 할 것은 이것은 문자의 줄 높이에서만 문자를 정렬할 수 있다는 것이다.예를 들어, 이 규칙을 사용하여 텍스트를 위 첨자 또는 아래 첨자 위치로 설정할 수 있지만 텍스트는 그대로 유지됩니다.
이런 식으로 텍스트를 용기 안에 수직으로 놓으려면 line-height 속성이 용기와 같은 높이를 가지고 있는지 확인해야 한다.

<div style="height: 200px; text-align: center;">
  <span style="vertical-align: middle; line-height: 200px;">
    This will center all inline elements
  </span>

  <div style="display: inline-block;">
    Inline blocks are also affected
  </div>
</div>

여기의 예: https://codepen.io/jacobparis/pen/RwPOdza

배경 포지셔닝

이미지에만 해당(및 SVG!)다른 요소의 배경으로 설정하려면 다음을 수행합니다.<img /> 표시에 대해div에 적용되는 모든 방법을 사용할 수 있습니다.
여기 룰은 background-position: center;

<div style="
  height: 300px;
  background-image: url('http://placekitten.com/200/200');
  background-repeat: no-repeat;
  background-position: center;
"/>

여기의 예: https://codepen.io/jacobparis/pen/rNVbgBO

한계 자동법

기본적으로 블록 요소는 최대 너비이므로 너비를 명시적으로 설정하기 전에 수평으로 가운데를 배치해도 아무 의미가 없습니다.
인공적으로 축소된div는 기본적으로 왼쪽(또는 RTL 장면의 오른쪽)이지만 margin-left: auto; margin-right: auto; 강제로 가운데에 놓을 수 있습니다
같은 페이지 간격의 상용 줄임말margin: 0 auto;은 수직 페이지 간격에 관심이 없기 때문에 우리가 하는 것을 막을 수 있는 것도 없다margin: auto;

<div>
  <div style="max-width: 300px; margin: 0 auto;">
    This is a centered div
  </div>
</div>

여기의 예: https://codepen.io/jacobparis/pen/RwPOOwR

위치 절대법

모든 방법 중에서 이것이 가장 극단적이다.우리는 브라우저로 하여금 요소가 어디에 있는지 계산하게 하지 않고, 현저하게 그것을 설정하게 했다.
여기서 중요한 것은 용기의 중심에 어떤 물건을 놓으려면 용기가 있어야 한다는 것이다position: relative;.이것이 바로 절대 위치 좌표를 알려주는 기초다.

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;

본질적으로, 원소의 가장자리를 용기의 가장자리에 고정시켜 크기를 완전히 같게 합니다.나중에 너비나 높이를 명시적으로 설정하고 자동 여백 방법을 사용하면 결국 모서리 사이에 걸립니다.
만약 수평 또는 수직 가운데만 있으면 다른 축을 생략할 수 있다

<div style="height: 500px; position: relative;">
  <div style="
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      width: 100px;
      height: 200px;
      margin: auto;">
    This is an absolutely positioned centered div
  </div>
</div>

여기의 예: https://codepen.io/jacobparis/pen/RwPOOwR

절대 편향법

이전 방법의 문제는 폭과 높이를 현식으로 설정해야 한다는 것이다.그런데 만약에 내용이 동태적으로 변하면?우리는 또 다른 해결 방안이 있다!
네 개의 각도를 모두 설정하지 말고 left: 50%; 및 top: 50%;만 설정합니다.이렇게 하면 요소의 왼쪽 위 모서리가 컨테이너의 중심에 배치됩니다.
그런 다음 CSS Translate를 사용하여 하위 객체의 폭과 높이를 왼쪽으로 반쯤 이동하여 중앙에 완전히 배치할 수 있습니다.

<div style="height: 200px; position: relative;">
  <div style="
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);">
    This is an absolutely positioned centered div with dynamic position
  </div>
</div>

여기의 예: https://codepen.io/jacobparis/pen/bGdJJJm

Flexbox 메서드

Flexbox는 게임 규칙을 가장 크게 바꾼 CSS로 마음을 한순간으로 만들었다.
flex의 관건은 부모 요소가 그들의 하위 요소를 레이아웃하는 것을 이해하는 것이다.만약 모든 원소를 자신의 위치에 두려고 한다면, 너는 아주 엉망으로 지낼 것이다.
flex 부모 원소는 그 하위 원소의 위치를 책임지기 때문에 그것이 내연 원소인지 블록 원소인지는 중요하지 않다.이것은 이미 별 차이가 없다.내연과 막힘이 아니라 flex 부대와 flex 자대의 관점에서 고려하다display: flex;를 가진 원소는 flex 부모 원소로 직접 서브원소만 제어하고 진일보한 서브원소는 제어하지 않는다.

<div style="
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
">
  <div>
    This is a flex-child
  </div>
  <span>
    This is a flex-child
  </span>
  <div>
    This is a flex-child
  </div>
</div>

여기의 예: https://codepen.io/jacobparis/pen/poJBBpq

격자법

CSS 격자는 매우 강하지만, 내가 오늘 알고 싶은 것보다 더 진보적이다.만약 당신이 단지 물건을 중간에 놓고 싶을 뿐이라면, 이 도안은 flexbox에 매우 가깝다. display: grid; 로 바꾸기만 하면 된다.
만약 여기에 원소가 하나만 있다면, 그것은 완전히 가운데에 있을 것이다. (flexbox도 마찬가지다)

<div style="
  height: 300px;
  display: grid;
  justify-content: center;
  align-items: center;
">
  <div>
    This is a flex-child
  </div>
  <span>
    This is a flex-child
  </span>
  <div>
    This is a flex-child
  </div>
</div>

여기의 예: https://codepen.io/jacobparis/pen/poJBBpq

메쉬(항목 배치)

내가 또 지적하고 싶은 또 다른 것은 place-items: center; 속성이다. 이것은 CSS 격자에서 justify-content, align-items와 text-align의 조합처럼 동시에 일한다.

display: grid;
place-items: center;