CSS에서 수직 중심 맞추기를 위한 7가지 기술 공유(코드 포함)

웹페이지에서 CSS의 수직 센터링에 대한 요구는 끊이지 않았고, 그 어려움도 결코 쉽지 않았습니다. 모든 개발자가 연구한 결과 CSS에 대한 수직 센터링 기술은 거의 10가지에 달한다고 합니다. 아직 알려진 바가 거의 없습니다. 일부 회사에서는 CSS 수직 센터링 기술을 면접 질문으로 간주하기도 합니다. 오늘은 CSS 수직 센터링의 다양한 방법에 대해 알아보도록 하겠습니다.

1. 줄 높이

적용 가능한 시나리오: 단일 줄 텍스트 세로 가운데 맞춤 기술

이 방법은 우리 모두 알고 있듯이 버튼이나 드롭다운 상자, 탐색 요소와 같은 한 줄 텍스트 응용 프로그램에서 가장 일반적으로 사용됩니다. 이 방법의 원리는 텍스트 한 줄의 줄 높이를 설정한 후 텍스트가 줄 높이의 세로 중앙에 위치하게 된다는 것입니다. 이 원리를 사용하면 세로 중심 맞춤 요구 사항을 쉽게 달성할 수 있습니다.

<div class="content">Lorem ipsam.</div>
.content{
  width: 400px;
  background: #ccc;
  line-height:100px;
  margin: auto;
}

2, 줄 높이 + 인라인 블록

적용 가능한 시나리오: 여러 객체에 대한 수직 센터링 기술#🎜🎜 #

첫 번째 방법을 사용하면 행 요소의 수직 중심 정렬을 구현할 수 있으므로 물론 여러 행으로 수행하지 못할 이유는 없습니다~ 하지만 여러 요소 또는 여러 행 요소를 다음과 같이 처리해야 합니다. 하나의 행 요소이므로 이 데이터를 하나 이상의 레이어로 래핑하고 이를 인라인 블록으로 설정하고 인라인 블록 객체의 외부 객체에서 인라인 블록을 사용하여 높이 설정을 대체해야 합니다. 제목과 내용을 포함한 데이터가 정상적으로 수직 중앙에 배치될 수 있습니다.

<div class="box box2">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;
}

3. :before + inline-block

적용 가능한 시나리오: 여러 객체에 대한 CSS 수직 센터링 기술#🎜🎜 #

:inline-block 속성을 사용하여 :before 의사 클래스 요소를 작성하는 방법은 매우 전통적인 수직 중앙 정렬 기술이어야 합니다. 이 방법의 장점은 설정하지 않고도 하위 요소를 중앙에 배치할 수 있다는 것입니다. 특별한 높이를 사용합니다. 클래스 요소가 100% 높이 인라인 블록으로 설정되고 중앙에 정렬되어야 하는 하위 요소도 인라인 블록으로 설정된 후 수직 정렬:중간을 사용할 수 있습니다. 수직 센터링의 목적을 달성하기 위해 이 방법은 실제로 과거에는 인라인 블록 요소 사이의 4-5px 공간이라는 작은 결함만 처리하면 되는 매우 좋은 수직 센터링 솔루션이었습니다. 현실적인.

<h2>3.:before + inline-block</h2>
<div class="box box3">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
}
.box::before{
  content:&#39;&#39;;
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.box .content{
  width: 400px;
  background: #ccc;
  display: inline-block;
  vertical-align: middle;
}

4, 절대 + 여백 음수 값

적용 가능한 시나리오: 여러 줄 텍스트의 세로 가운데 맞춤 기술#🎜🎜 #

절대 위치 지정은 자제해서 사용해야 한다고 누가 말했나요? 아모스는 적게 사용해도 많이 사용해도 문제가 없다고 생각합니다. 이 예에서는 절대 위치 지정이 공간 높이의 50%를 차지하도록 top:50%를 설정한 다음 여백을 설정합니다. -중심 요소의 상단. 요소가 중심에 위치할 수 있도록 높이를 음의 절반으로 설정합니다. 이 방법은 수년 동안 전수된 중심 방법인가요?

<h2>4.absolute + margin 負值</h2>
<div class="box box4">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.box4 .content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -35px;
}

5, 절대 + 여백 자동

적용 가능한 시나리오: 여러 줄 텍스트에 대한 세로 가운데 맞춤 기술 # 🎜🎜#또 다른 절대 위치 지정 수직 센터링 솔루션입니다. 이 방법은 요소가 절대 위치 지정으로 설정된 경우 전체 사용 가능한 공간 범위를 캡처할 수 없다고 가정하므로 margin:auto가 실패합니다. top:0;bottom:0;이 설정되면 절대 위치 지정 요소가 사용 가능한 공간을 캡처합니다. 이때 절대 위치 지정 요소를 상위 요소의 수평 중앙에 배치해야 하는 경우 margin:auto가 적용됩니다. 그런 다음 절대 위치에 있는 요소가 사용 가능한 공간을 확보하도록 left:0;right:0;을 설정한 다음 margin-left 및 margin-right를 자동으로 설정하여 중앙에 배치할 수도 있습니다. 그러나 이 방법의 단점은 배치된 요소가 적절하게 중앙에 배치되려면 고정된 너비와 높이(백분율도 계산됨)를 가져야 한다는 것입니다.

<h2>5.absolute + translate(-50%, -50%)</h2>
<div class="box box5">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

6. 디스플레이: table-cell

적용 가능한 시나리오: 여러 줄 텍스트의 세로 가운데 맞춤 기술#🎜🎜 # 나 같은 젊은 개발자는 이 트릭을 처음 봤어야 했다고 생각합니다. 이 트릭의 원리는 CSS 표시 속성을 사용하여 div를 설정하는 것입니다. 저장 셀 정렬을 지원하는 수직 정렬 속성을 사용하여 정보를 수직 중앙에 배치할 수 있도록 테이블 셀

<h2>19.display: table-cell</h2>
<div class="box box19">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
    text-align: center;
    display: table-cell;
  vertical-align: middle;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

7. padding

# 🎜🎜#
적용 가능한 시나리오: 여러 줄의 텍스트에 대한 세로 중심 맞춤 기술

What! 이것도 수직 센터링 기법이라고 생각합니다. 할머니도 이 방법을 알고 계시죠네, 사실 수직 센터링 방법이 어떤 분들에게는 너무 단순하다는 점은 부인할 수 없습니다. 이 방법을 수직 센터링 기술로 간주할 수 없다고 생각하는 개발자는 내 데이터가 실제로 수직 센터링이라는 사실을 반박할 수 없습니다. 글쎄, 당신이 맞습니다

.

<h2>22.padding</h2>
<div class="box box22">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  height: auto;
  padding: 50px 0;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

요약: 위 내용은 CSS 수직 센터링 기술 7가지를 소개합니다. 궁금한 점이 있으면 메시지를 남겨주시면 편집자가 즉시 답변해 드리겠습니다. . 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

위 내용은 CSS에서 수직 중심 맞추기를 위한 7가지 기술 공유(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!