수직 가운데 맞춤법

표시 방식을 표로 설정하고display:table-cell, 동시에 설정vertial-align: middle

사용flex 레이아웃, 설정align-item：center

절대 포지셔닝bottom:0,top:0 및 설정margin:auto

절대 포지셔닝에서 고정 높이를 설정할 때top:50%, margin-top 값은 높이의 절반인 음수

텍스트 수직 가운데 설정line-height은height값

단일행 텍스트의 경우 line-height 및 height 값

으로 설정

.vertical {
     
    height: 100px;
    line-height: 100px;
  }

이미 알고 있는 높이의 블록 등급 서브 요소로 절대 포지셔닝과 마이너스 간격

을 사용한다.

.container {
     
  position: relative;
}
.vertical {
     
  height: 300px;  /*     */
  position: absolute;
  top:50%;  /*     50%*/
  margin-top: -150px; /*      */
}

알 수 없는 높이의 블록 레벨 모/자 요소 가운데, 아날로그 테이블 레이아웃

단점: IE67호환되지 않음, 부급overflow：hidden실효

.container {
     
    display: table;
  }
  .content {
     
    display: table-cell;
    vertical-align: middle;
  }

형제 요소 추가inline-block, 설정vertical-align

단점: 추가 태그 필요IE67 호환 불가

.container {
     
  height: 100%;/*      ，    */
}
.extra .vertical{
     
  display: inline-block;  /*     */
  vertical-align: middle; /*    */
}
.extra {
     
  height: 100%; /*         100%*/
}

절대 포지셔닝 협조CSS3 위치 이동

.vertical {
     
  position: absolute;
  top:50%;  /*     50%*/
  transform:translateY(-50%, -50%);
}

CSS3탄성 박스 모형

.container {
     
  display:flex;
  justify-content: center; /*       */
  align-items: center; /*       */
}