요약: CSS를 사용하여 요소를 수직 중앙으로 설정

프런트 엔드 공성 엔지니어로서 웹 페이지를 만들 때 CSS의 수평 및 수직 센터링에 대해 모두가 연구하거나 작성했다고 생각합니다. 특히 수직 센터링은 더욱 짜증나는 기사입니다. 이 기사에서는 CSS를 사용하여 요소의 수직 중심을 설정하는 방법을 주로 소개합니다. 이러한 방법을 사용하면 더 이상 걱정할 필요가 없습니다.

머리말

일상적인 웹 페이지 레이아웃에서 자주 접하는 문제이기도 합니다. 이 글에서는 주로 CSS를 사용하여 요소의 세로 중심을 설정하는 방법을 소개합니다. 다양한 상황 이 문제에 직면한 친구들에게 다양한 솔루션이 도움이 될 것이라고 믿습니다. 아래에서는 자세히 설명하지 않겠습니다. 자세한 소개를 살펴보겠습니다.

html 코드:

<p class="parent">
<p class="child">Text here</p>
</p>

자식 요소의 수직 중심을 설정했기 때문에 소위 중심이 어디에 있는지 알기 위해서는 부모 요소의 높이를 알아야 겠죠? 멀리 떨어져 있으려면 중간 위치에서 멈추세요. 그런 다음 중간 위치가 어디인지 알기 전에 먼저 이 거리가 얼마나 긴지 알아야 합니다.
제 모든 높이와 너비 비율은 html,body {width: 100%;height: 100%;}이러한 설정을 기준으로 합니다. 이 설정이 없으면 .parent p의 상위 요소는 본문이고 본문의 너비와 높이를 설정하지 않았으므로 효과가 표시되지 않을 수 있습니다. .parent p의 종횡비는 해당 요소에 상대적입니다. 부모 요소를 사용하는 경우 .parent p의 부모 요소에 너비와 높이가 설정되어 있는지 확인해야 합니다.

(1) 인라인 텍스트가 세로로 가운데 정렬됩니다.

css 코드:

.parent {
    height: 100px;
    border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.child {
    line-height: 100px;
}

(2 ) 인라인 비텍스트 세로 가운데 맞춤(img를 예로 사용)

html 코드:

<p class="parent">
    <img src="image.png" alt="" />
</p>

css code

.parent {
    height: 100px;
    border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.parent img {
    //注意此时应该保证图片自身的高度或者你设置的高度小于父元素的200px的行高,不然你看不出来居中的效果.
    line-height: 100px;
}

(3 ) 높이를 알 수 없는 블록 수준 요소는 수직으로 중앙에 배치됩니다.
html 코드:

<p class="parent">
  <p class="child">
    <!--.child的高度未知,父元素要有高度-->
    sddvsds dfvsdvds
  </p>
</p>

첫 번째 방법(패딩 필요 없음):

css 코드:

.parent {
  width: 100%;
  height: 100%;
  position: relative;
  /*display: table;*/
}
.child {
  width: 500px;
  border: 1px solid #ccc; /*设置border是为了方便查看效果*/
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Secon d 방법 (변환 없음):

css 코드:

.parent {
    position: relative;
    width: 100%;
    height: 100%;
}
.child {
  width: 500px;
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  margin: auto;
}

세 번째 방법(패딩 추가 필요):

css 코드:

#parent {
  padding: 5% 0;
}
#child {
  padding: 10% 0;
}

네 번째 방법:

( display: table 사용, 이 방법은 인라인 텍스트 요소를 중앙에 맞추는 데에도 적합합니다.):

css 코드:

.parent {
  width: 100%;
  height: 100%;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

다섯 번째 방법(여기서는 플렉스 레이아웃, 호환성을 고려해야 합니다!)

css 코드:

.parent {
    width: 100%;
    height: 100%; /*这里一定要写高度奥!*/
    display: flex;
    align-items: center;
    justify-content: center;
  }

(4) 높이가 알려진 블록 수준 요소는 수직으로 중앙에 배치됩니다.
html 코드:

<p class="parent">
  <p class="child">
    <!--.child的高度已知,父元素高度已知-->
    sddvsds dfvsdvds
  </p>
</p>

css 코드:

#parent {
  height: 300px;
}
#child {
  height: 40px;
  margin-top: 130px; /*这个只为父元素的高度减去这个元素的高度除以二计算得到的*/
  border: 1px solid #ccc;
}

위는 현재 발견되어 개인적으로 가능한 방법을 몇 가지 테스트해 보면 다른 방법도 있을 겁니다

위 내용은 요약: CSS를 사용하여 요소를 수직 중앙으로 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!