CSS 수직 거 중 을 완벽 하 게 실현 하 는 11 가지 방법

본인 의 전단 소 백 은 작은 프로그램 개발 프로젝트 를 하고 있 습 니 다.css 스타일 조정 은 머리 가 커 졌 습 니 다.수직 가운데 에 대해 서 는 글 의 수직 가운데 css 스타일 설정 을 시 도 했 습 니 다.제 문 제 를 성공 적 으로 해결 하 였 기 때문에 백업 으로 옮 겨 왔 습 니 다.
CSS 수직 가운데 11 가지 실현 방법 은 다음 과 같다.
1.절대 포 지 셔 닝 과 네 거 티 브 외곽 거 리 를 사용 하여 블록 급 요 소 를 수직 으로 가운데 로 한다.
html 코드:

<div id="box">
  <div id="child">    DIV</div>
</div></pre>
css  ：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 position: relative;
} 
#child { 
 width: 150px; 
 height: 100px; 
 background: orange; 
 position: absolute; top: 50%; 
 margin: -50px 0 0 0; 
 line-height: 100px;
}

실행 결 과 는 다음 과 같 습 니 다.

이 방법 은 호환성 이 좋 지만 작은 단점 이 있 습 니 다.중간 블록 급 요소 의 사 이 즈 를 미리 알 아야 합 니 다.그렇지 않 으 면 수직 가운데 에 있 는 것 을 정확하게 실현 할 수 없습니다.
2.절대 포 지 셔 닝 과 transform 사용
html 코드:

<div id="child">                                         </div></pre>
css  ：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 position: relative;
} 
#child { 
 background: #93BC49; 
 position: absolute; 
 top: 50%; 
 transform: translate(0, -50%);
}

실행 결 과 는 다음 과 같 습 니 다.

이런 방법 은 매우 뚜렷 한 장점 중 하 나 는 바로 중간 요소 의 사 이 즈 를 미리 알 필요 가 없다 는 것 이다.왜냐하면 transform 에서 translate 오프셋 의 백분율 은 요소 자체 의 사이즈 에 비해 말 하기 때문이다.
3.다른 하 나 는 절대 포 지 셔 닝 과 네 거 티 브 외곽 거 리 를 사용 하여 수직 으로 가운데 에 있 는 방식 이다.
html 코드:

<div id="box">
  <div id="child">      DIV</div>
</div></pre>
css  ：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 position: relative;
} 
#child { 
 width: 50%; 
 height: 30%; 
 background: pink; 
 position: absolute; 
 top: 50%; 
 margin: -15% 0 0 0;
}

실행 결 과 는 다음 과 같 습 니 다.

이런 방식 의 원 리 는 실질 적 으로 앞의 두 가지 와 같다.보충 하 는 것 은 margin 의 수치 도 백분율 일 수 있다 는 것 이다.이때 이 수 치 는 이 요소 가 부모 요소 의 사 이 즈 를 바탕 으로 하 는 백분율 을 규정 하고 실제 사용 장면 에 따라 구체 적 인 수치 로 할 지 백분율 로 할 지 결정 할 수 있다.
4.절대 포 지 셔 닝 결합 margin:auto
html 코드:

<div id="box">
  <div id="child">       (。n。)</div>
</div></pre>
css  ：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 position: relative;
} 
#child { 
 width: 200px; 
 height: 100px; 
 background: #A1CCFE; 
 position: absolute; top: 0; 
 bottom: 0; 
 margin: auto; 
 line-height: 100px;
}

실행 결 과 는 다음 과 같 습 니 다.

이러한 실현 방식 의 두 가지 핵심 은 수직 으로 가운데 에 있 을 요 소 를 부모 요소 에 비해 절대적 으로 포 지 셔 닝 하고 top 과 bottom 을 똑 같은 값 으로 설정 하 는 것 이다.나 는 여기 서 0 으로 설정 했다.물론 너 도 99999 px 또는 99999 px 로 설정 할 수 있다.둘 이 같 으 면 된다.이 단 계 를 한 후에 중간 에 있 을 요소 의 margin 을 auto 로 설정 하면 수직 으로 가운데 에 있 을 수 있다.
중간 요소 의 너비 와 높이 를 설정 하지 않 아 도 되 지만 설정 하지 않 으 면 그림 자체 에 사이즈 요 소 를 포함 해 야 합 니 다.그렇지 않 으 면 실현 할 수 없습니다.
5.padding 을 사용 하여 하위 요소 의 수직 중앙 을 실현 합 니 다.
html 코드:

<div id="box">
  <div id="child">           ，     PM2.5 422</div>
</div>
css  ：
#box { 
 width: 300px; 
 background: #ddd; 
 padding: 100px 0;
} 
#child { 
 width: 200px; 
 height: 100px; 
 background: #F7A750; 
 line-height: 50px;
}

실행 결 과 는 다음 과 같 습 니 다.

이러한 실현 방식 은 매우 간단 하 다.바로 부모 요소 에 똑 같은 상하 내 거 리 를 설정 하 는 것 이다.그러면 서브 요 소 는 수직 으로 가운데 에 있 는 것 이다.물론 이때 부모 요 소 는 높이 를 설정 할 수 없고 자동 으로 채 워 야 한다.위 내 거리+하위 요소 높이+아래 내 거리 와 같은 값 을 설정 하지 않 으 면 정확 한 수직 가운데 에 있 을 수 없다.
이런 방식 은 기술적 함량 이 별로 없 는 것 처럼 보이 지만 사실은 어떤 장면 에서 도 매우 쓰기 좋다.
6.제3자 기준 설정
html 코드:

<div id="box">
  <div id="base"></div>
  <div id="child">         ，         ！
  </div>
</div>
css  ：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd;
} 
#base { 
 height: 50%; 
 background: #AF9BD3;
} 
#child { 
 height: 100px; 
 background: rgba(131, 224, 245, 0.6); 
 line-height: 50px; 
 margin-top: -50px;
}

실행 결 과 는 다음 과 같 습 니 다.

이런 방식 도 매우 간단 하 다.먼저 높이 가 부모 요소 의 높이 의 절반 과 같은 제3자 기준 요 소 를 설정 하면 이때 이 기준 요소 의 밑줄 은 자 연 스 럽 게 부모 요소 가 수직 으로 올 라 가 는 중앙 선 이다.이 를 한 후에 수직 으로 가운데 에 있 는 요소 에 margin-top 을 설정 하고 값 의 크기 는 자신의 높이 의 절반 에서 마이너스 가 되면 수직 으로 가운데 에 있 는 것 을 실현 한다.
7.flex 레이아웃 사용
html 코드:

<div id="box">    ，       </div>
css  ：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 display: flex; 
 align-items: center;
}

실행 결 과 는 다음 과 같 습 니 다.

이러한 방식 은 블록 급 요소 에 도 적용 된다.
html 코드:

<div id="box">
  <div id="child">             ？ </div>
</div>
css  ：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 display: flex; 
 align-items: center;
}
#child { 
 width: 300px; 
 height: 100px; 
 background: #8194AA; 
 line-height: 100px;
}

실행 결 과 는 다음 과 같 습 니 다.

flex 레이아웃(탄력 적 인 레이아웃/신축 레이아웃)에는 요령 이 많 습 니 다.여기 서 먼저 사용 하 는 것 에 대해 간단하게 말씀 드 리 겠 습 니 다.깊이 공부 하고 싶 은 동료 들 은 완 일 봉 선생님 의 블 로 그 를 보 러 갈 수 있 습 니 다.(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）
flex 는 flexible 로 유연 하고 유연 하 며 구 부 러 지기 쉽다 는 뜻 이다.
요 소 는 display:flex 를 설정 할 수 있 습 니 다.플 렉 스 레이아웃 의 용기 로 지정 하고 용 기 를 지정 한 다음 에 align-items 속성 을 추가 합 니 다.이 속성 은 항목 이 교차 축(여 기 는 세로 축)에서 정렬 하 는 방식 을 정의 합 니 다.가능 한 수 치 는 다섯 개 입 니 다.각각 다음 과 같 습 니 다.
flex-start::교차 축의 출발점 정렬;
flex-end:교차 축의 종점 정렬;
center:교차 축의 중심 점 정렬;
baseline:프로젝트 첫 줄 텍스트 의 기본 줄 정렬;
stretch(이 값 은 기본 값):항목 이 높이 를 설정 하지 않 았 거나 auto 로 설정 되 어 있 지 않 으 면 전체 용기 의 높이 를 차지 합 니 다.
8.두 번 째 는 탄력 적 인 레이아웃 을 사용 하 는 방식
html 코드:

<div id="box">
  <div id="child">                </div>
</div>
css  ：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 display: flex; 
 flex-direction: column; 
 justify-content: center;
} 
#child { 
 width: 300px; 
 height: 100px; 
 background: #08BC67; 
 line-height: 100px;
}

실행 결 과 는 다음 과 같 습 니 다.

이러한 방식 도 먼저 부모 요소 에 display:flex 를 설정 하고 설정 한 후에 주축 의 방향 을 바 꾸 는 flex-direction:column 입 니 다.이 속성 은 가능 한 수 치 는 네 가지 가 있 습 니 다.각각 다음 과 같 습 니 다.
row(이 값 은 기본 값):주축 은 수평 방향 이 고 출발점 은 왼쪽 에 있 습 니 다.
row-reverse:주축 은 수평 방향 이 고 출발점 은 오른쪽 끝 에 있 습 니 다.
column:주축 은 수직 방향 이 고 출발점 은 위 에 있 습 니 다.
column-reverse:주축 은 수직 방향 이 고 출발점 은 아래 에 있 습 니 다.
justify-content 속성 은 프로젝트 가 주축 에 있 는 정렬 방식 을 정의 합 니 다.가능 한 수 치 는 다섯 가지 가 있 습 니 다.각각 다음 과 같 습 니 다.(그러나 구체 적 인 정렬 방식 은 주축 의 방향 과 관련 이 있 고 아래 의 수 치 는 모두 주축 이 왼쪽 에서 오른쪽으로 가설 한 것 입 니 다)
flex-start(이 값 은 기본 값):왼쪽 정렬;
flex-end:오른쪽 정렬;
center:가운데 정렬;
space-between:양 끝 을 정렬 하고 각 항목 간 의 간격 이 같 습 니 다.
space-around:각 항목 양쪽 의 간격 이 같 습 니 다.
9.line-height 를 사용 하여 한 줄 의 텍스트 를 수직 으로 가운데 로 합 니 다.
html 코드:

<div id="box">          </div>
css  ：
#box{ 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 line-height: 300px;
}

실행 결 과 는 다음 과 같 습 니 다.

여기에 작은 구덩이 가 있 습 니 다.line-height(줄 높이)의 값 은 100%로 설정 할 수 없습니다.공식 문서 에서 line-height 의 수치 가 백분율 일 때 설명 하 는 것 을 보 겠 습 니 다.현재 글꼴 크기 의 백분율 줄 간격 을 기반 으로 합 니 다.그래서 여기 의 백분율 은 부모 요소 의 크기 가 아니 라 글꼴 크기 에 대한 것 임 을 잘 알 게 되 었 습 니 다.
10.line-height 와 vertical-align 을 사용 하여 그림 을 수직 으로 가운데 로 한다.
html 코드:

<div id="box">
  <img src="duncan.jpeg">
</div>
css  ：
#box{ 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 line-height: 300px;
} 
#box img { 
 vertical-align: middle;
}

실행 결 과 는 다음 과 같 습 니 다.

vertical-align 은 보기 처럼 그렇게 순진 하고 사악 한 어린이 와 노인 을 속 이지 않 고 나중에 따로 들 고 한 편 을 쓸 것 이다.
11.display 와 vertical-align 을 사용 하여 용기 안의 텍스트 를 수직 으로 가운데 로 합 니 다.
html 코드:

<div id="box">
  <div id="child">         </div>
</div>
css  ：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 display: table;
} 
#child { 
 display: table-cell; 
 vertical-align: middle;
}

실행 결 과 는 다음 과 같 습 니 다.

여기 서 vertical-align 에 관 한 두 마디:vertical-align 속성 은 vaign 특성 을 가 진 html 요소 에 만 작용 합 니 다.예 를 들 어 표 요소 중의등 은