css 문자 수직 가운데 8 가지 방법 실현

주의:아래 demo 는 모두 현대 브 라 우 저 를 위 한 것 일 뿐 저 버 전의 IE 및 기타 비주류 브 라 우 저 를 호 환 하지 않 습 니 다.
css 문자 의 수직 거 중 을 실현 하 는 8 가지 방법 은 다음 과 같다.
1.절대 포 지 셔 닝 과 네 거 티 브 외곽 거 리 를 사용 하여 블록 급 요 소 를 수직 으로 가운데 로 한다.
css 수직 가운데 효과:

css 수직 가운데 구현 코드:

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

이런 방법 은 매우 뚜렷 한 장점 은 가운데 에 있 는 요소 의 사 이 즈 를 미리 알 필요 가 없다 는 것 이다.왜냐하면 transform 에서 오프셋 하 는 백분율 은 바로 요소 자체 의 사이즈 에 비해 말 하기 때문이다.
3.절대 포 지 셔 닝 결합 margin:auto

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

이런 방식 은 매우 간단 하 다.바로 부모 요소 에 똑 같은 상하 내 사 이 드 거 리 를 설정 하 는 것 이다.그러면 서브 요 소 는 수직 으로 가운데 에 있 는 것 이다.자 연 스 럽 게 이때 부모 요 소 는 높이 를 설정 할 수 없고 자동 으로 채 워 야 한다.위 내 사 이 드 거리+하위 요소 높이+아래 내 사 이 드 거 리 를 설정 하지 않 으 면 수직 으로 가운데 에 있 을 수 없다.
이런 방식 은 기술적 함량 이 별로 없 는 것 처럼 보이 지만 사실은 어떤 장면 에서 도 매우 유용 하 다.
5.flex 레이아웃 사용

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

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

여기 작은 구덩이 가 있 습 니 다.line-height(행 높이)의 값 은 100%로 설정 할 수 없습니다.홈 페이지 문서 에서 보 여 준 line-height 수치 가 백분율 일 때 에 대한 설명 을 살 펴 보 겠 습 니 다.현재 글꼴 크기 의 백분율 줄 간격 을 바탕 으로 하기 때문에 백분율 이 글꼴 크기 에 비해 있다 는 것 을 알 수 있 습 니 다.
8.display 와 vertical-align 을 사용 하여 용기 안의 텍스트 를 수직 으로 가운데 로 합 니 다.

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