#child ( 줄 높이: 200px; )

이 방법은 모든 브라우저에서 작동하지만 텍스트 줄에 사용해야 한다는 점을 잊지 마십시오. 텍스트가 두 줄 이상인 경우 다른 방법을 사용하십시오. line-height 속성의 값은 무엇이든 가능하지만 글꼴 높이보다 작을 수는 없습니다. 실제로 이 방법은 가로 메뉴를 중앙에 배치하는 데 효과적입니다.

테이블 속성을 사용하는 CSS 방법

이미 작성한 것처럼 CSS의 수직 정렬 속성을 사용하여 셀 내용을 중앙에 맞출 수 있습니다. 상위 요소는 테이블로 표시되어야 하고, 하위 요소는 셀로 지정되어야 하며, middle 값으로 수직 정렬 속성을 적용해야 합니다. 이렇게 하면 하위 요소의 모든 콘텐츠가 세로로 중앙에 배치됩니다. CSS 코드는 아래와 같습니다.

#parent( 디스플레이: 테이블;) #child( 디스플레이: 테이블-셀; 수직 정렬: 중간; )

안타깝게도 이 방법은 이전 버전의 IE 브라우저에서는 작동하지 않습니다. IE6 이하에 대한 브라우저 지원이 필요한 경우 하위 요소에 display: inline-block 선언을 추가하세요.

#child(표시: 인라인 블록; )

절대 위치 지정 및 음수 마진

이 방법은 블록 수준 요소용으로 설계되었으며 모든 브라우저에서 작동합니다. 중앙에 배치해야 하는 요소의 높이를 설정해야 합니다.

다음은 이 메서드를 사용하여 하위 요소를 중앙에 배치하는 코드입니다.

#parent(위치: 상대;) #child( 위치: 절대; 위쪽: 50%; 왼쪽: 50%; 높이: 30%; 너비: 50%; 여백: -15% 0 0 -25%; )

먼저 상위 요소와 하위 요소를 배치해야 합니다. 그런 다음 하위 요소의 오프셋을 상위 요소의 상단 및 왼쪽을 기준으로 50%로 설정하여 상위 요소를 기준으로 하위 요소를 중앙에 배치합니다. 그러나 우리의 조작은 자식 요소의 오른쪽 상단 모서리를 부모 요소의 중앙에 맞추게 되는데, 이는 물론 우리에게 적합하지 않습니다.

우리의 임무: 하위 요소를 상위 요소를 기준으로 위쪽 및 왼쪽으로 이동하여 하위 요소가 시각적으로 수직 및 수평 중앙에 위치하도록 하는 것입니다. 이것이 바로 하위 요소의 높이와 너비를 알아야 하는 이유입니다.

따라서 하위 요소에 음수 위쪽 및 왼쪽 여백을 각각 하위 요소의 너비와 높이의 절반으로 지정해야 합니다.

처음 두 가지 방법과 달리 이 방법은 블록 수준 요소를 위한 것입니다. 이 방법은 모든 브라우저에서 작동하지만 콘텐츠가 상위 요소의 높이를 초과하고 해당 경계를 넘어 확장될 수 있습니다. 이 방법은 요소의 높이와 너비가 고정되어 있을 때 가장 효과적입니다.

하위 요소의 절대 위치 지정

이전 방법과 마찬가지로 상위 요소와 하위 요소는 각각 상대적 위치와 절대 위치를 지정합니다.

CSS 코드에서는 하위 요소를 세로와 가로 모두 가운데에 배치합니다. 그러나 세로 가운데 맞춤만 사용할 수 있습니다.

#parent(위치: 상대;) #child( 위치: 절대; 위쪽: 0; 아래쪽: 0; 왼쪽: 0; 오른쪽: 0; 너비: 50%; 높이: 30%; 여백: 자동; )

이 방법의 아이디어는 top , left , right , Bottom 속성 값을 0과 동일하게 사용하여 하위 요소를 배치할 수 있다는 것입니다. 하위 요소는 상위 요소보다 작기 때문에 "고정"할 수 없습니다. "를 상위 요소에 추가합니다.

하위 요소의 네 측면 모두에 대한 여백 값은 0이며, 이는 상위 요소를 기준으로 요소를 수직으로 중앙에 배치합니다. 불행하게도 이 방법에는 이전 방법과 동일한 단점이 있습니다. 즉, 하위 항목의 높이와 너비를 수정해야 하며 이전 IE 브라우저에 대한 지원이 부족합니다.

아래쪽 여백과 위쪽 여백이 동일합니다.

이 방법에서는 상위 요소에 동일한 패딩(하단 및 상단)을 명시적으로 할당하여 하위 요소를 시각적으로 세로 중앙에 배치합니다.

#parent ( 패딩: 5% 0; ) #child ( 패딩: 10% 0; )

나는 상대적인 크기를 사용합니다. 블록 크기가 고정되어 있으면 몇 가지 수학적 계산을 수행해야 합니다.

예를 들어 상위 요소의 높이가 400px이고 하위 요소의 높이가 100px인 경우 상단 및 하단 패딩을 150px로 설정해야 합니다.

150 + 150 + 100 = 400

플로팅 div

이 방법에는 하위 요소의 수직 위치를 제어하는 ​​빈 부동 블록이 포함됩니다. 플로팅 div는 하위 요소 앞에 배치되어야 합니다. 아래 HTML 코드를 참조하세요.

#parent(높이: 250px;) #floater(float: 왼쪽; 높이: 50%; 너비: 100%; margin-bottom: -50px; ) #child( 지우기: 둘 다; 높이: 100px; )

먼저 부동 블록을 왼쪽(또는 오른쪽)으로 이동하고 높이를 상위 블록의 50%로 지정합니다. 이렇게 하면 플로팅 블록이 상위 요소의 위쪽 절반을 채울 것입니다.

블록은 부동형이므로 문서의 일반 흐름에서 제거됩니다. 따라서 하위 블록에는 값이 둘다 있는 명확한 속성이 할당되어야 합니다. 값을 양쪽으로 설정했는데, 플로팅 요소의 위치 지정 방향에 맞는 값을 사용해도 됩니다.

현재 하위 요소의 위쪽 가장자리는 부동 요소의 아래쪽 가장자리 바로 아래에 있습니다. 하위 요소를 부동 요소 높이의 절반으로 올려야 합니다. 이렇게 하려면 플로팅 블록의 음수 하단 여백을 50%로 설정하면 됩니다.

모든 브라우저에서 작동합니다. 이 방법의 단점은 빈 블록이 필요하고 하위 요소의 높이를 알아야 한다는 것입니다.

CSS에서 요소를 수직으로 중앙에 배치하는 문제에는 이미 만들어진 솔루션이 많이 있습니다. 각 개별 사례의 정렬 방법 선택은 요소의 유형, 크기, 위치 지정 및 지정된 기타 속성에 따라 다릅니다.

다음은 레이아웃 디자이너들 사이에서 널리 사용되는 몇 가지 수직 정렬 기술입니다. 이는 작동 방식과 각각이 가장 적합한 경우를 보여줍니다.

다음은 두 개의 div 요소입니다.

각 방법은 실내기를 실외기의 중앙에 맞추는 데 사용됩니다.

한 줄의 줄 높이

부모가 텍스트의 한 줄을 차지하고 자식의 높이를 알고 있으면 line-height 속성을 적용할 수 있습니다. 속성 값은 외부 블록의 높이와 같아야 합니다. 이는 한 줄에만 작동하므로 자식 항목에 Overflow: Hidden 및 White-space: nowrap을 추가하는 것이 유용합니다.

이 경우 100%가 글꼴 높이이므로 백분율 표기 line-height=100%를 사용할 수 없습니다.

컨테이너(
높이: 300px;
줄 높이: 300px;
}

내부(
공백: nowrap;
오버플로: 숨김;
}

이 방법은 외부 블록의 높이를 알고 있는 경우에만 적용 가능합니다.

수직 정렬이 적용된 테이블

테이블은 요소의 수직 정렬에 이상적입니다. 의미론을 위반하지 않으려면 CSS를 사용하여 테이블 요소를 만드는 것이 좋습니다. 셀 내용의 위치는 수직 정렬로 제어됩니다. 표에는 이 속성에 대한 네 가지 값이 있습니다.

기준 - 기본값;
. 하단 - 셀 하단의 내용입니다.
. 중간 — 셀 중앙의 내용;
. top — 셀 상단의 콘텐츠입니다.

첫 번째 예에서는 단일 테이블 셀이 외부 블록이 됩니다.

컨테이너(
디스플레이: 테이블 셀;
수직 정렬: 중간;
}

이 방법의 좋은 점은 지정된 높이가 없는 요소에 대해 작동한다는 것입니다. 그러나 어떤 경우에는 테이블 셀과 마찬가지로 외부 블록이 내용에 맞게 너비를 조정하고 늘릴 수 있다는 사실로 인해 사용이 제한됩니다. 너비에 대한 너비를 명시적으로 설정해야만 가능합니다. 표가 없는 셀의 경우 백분율이 제대로 작동하지 않습니다.

이 단점은 display:table 속성을 사용하여 상위 셀을 래핑하여 수정됩니다. 이 요소의 크기는 백분율로 설정할 수 있습니다. 최종 코드는 다음과 같습니다:

외부 포장지(
디스플레이: 테이블;
}

컨테이너(
디스플레이: 테이블 셀;
수직 정렬: 중간;
}

위치: 절대값 + 음수 여백

이 방법은 내부 요소의 높이를 알 때 사용됩니다. 외부 장치에서는 이를 알 수 없습니다. 부모에는 상대 위치가 지정되고 그 안에 있는 자식에는 절대 위치가 지정됩니다.

상단 속성 값이 50%이면 중첩된 요소가 상단 가장자리가 외부 블록의 중앙에 위치하게 됩니다. 남은 것은 음의 여백 상단을 자체 높이의 절반으로 높여 정확히 수직 중앙에 서도록 하는 것입니다.

컨테이너(
위치: 상대;
}

내부(
높이: 140px;
위치: 절대;
상단: 50%;
여백 상단: -70px;
}

이 방법의 단점은 아이의 키를 알아야 한다는 것입니다.

수직 정렬에 맞춰 정렬

이미지와 아이콘을 포함한 인라인 및 인라인 블록 요소의 주변 텍스트 정렬은 수직 정렬 속성을 통해 수행됩니다. 테이블과 달리 이 경우 사양에 지정된 전체 값 집합이 작동합니다.

상위 항목의 높이를 알고 있는 경우 이 속성을 사용하여 여러 줄 문자를 가운데에 배치할 수 있습니다.

외부 블록의 경우 한 줄의 중심이 지정됩니다.

컨테이너(
높이: 140px;
줄 높이: 140px;
}

내부 블록의 줄 높이 값은 일반 또는 원하는 값으로 재정의됩니다. 또한 수직 정렬: 중간 정렬과 인라인 블록 유형으로의 변환(디스플레이: 인라인 블록)도 제공됩니다.

내부(
디스플레이: 인라인 블록;
줄 높이: 보통;
수직 정렬: 중간;
}

이 방법의 단점은 부모의 키를 알아야 한다는 것입니다.

변환과 정렬

변환 속성의translateY 함수를 사용하면 높이를 알 수 없는 내부 블록을 중앙에 배치할 수 있습니다. 그러기 위해서는 부모는 상대적으로 위치해야 하고, 자식은 절대적으로 위치해야 합니다.

값이 50%인 상단 속성은 내부 블록을 낮추어 상단 가장자리가 상위 블록의 중앙에 위치하도록 합니다. TranslateY 값: -50%는 요소를 자체 높이의 절반으로 올려 블록의 수직 중심을 정렬합니다.

컨테이너(
위치: 상대;
}

내부(
위치: 절대;
상단: 50%;
변환: 번역Y(-50%);
}

이 기술의 단점은 IE 브라우저의 변환 기능에 대한 지원이 제한된다는 것입니다.

의사 요소를 통한 정렬

이 방법은 첫 번째 블록과 두 번째 블록 모두 높이를 알 수 없는 경우에 작동합니다. 인라인 블록 의사 요소는 before 또는 after를 사용하여 부모 내부에 추가됩니다. 추가된 요소의 높이는 상위 요소의 높이(높이: 100%)와 같아야 합니다. 콘텐츠의 수직 정렬은 수직 정렬: 중간을 사용하여 설정됩니다.

수직 정렬: 중간을 사용하면 내부 블록이 이 의사 요소를 기준으로 정렬됩니다. 부모와 자식의 높이가 같기 때문에 내부 요소는 의사 요소와 수직으로 정렬되지만 외부 상자의 중앙에도 배치됩니다.

컨테이너:이전(
콘텐츠: "";
높이: 100%;
수직 정렬: 중간;
디스플레이: 인라인 블록;
}

내부(
디스플레이: 인라인 블록;
수직 정렬: 중간;
}

보편적인 방법. 실내기가 절대위치로 설정되어 있으면 동작하지 않습니다.

플렉스박스

요소를 수직으로 정렬하는 가장 새롭고 쉬운 방법입니다. Flexbox를 사용하면 웹 페이지의 요소를 원하는 대로 배열할 수 있습니다. 블록을 중앙에 배치하려면 부모에는 display: flex 를, 자식에는 margin: auto 를 설정하면 됩니다.

컨테이너(
디스플레이: 플렉스;
너비: 320px;
높이: 140px;
}

내부(
너비: 120px;
여백: 자동;
}

Flexbox는 최신 브라우저에서만 작동합니다.

방법 선택

사용할 수직 정렬 기술은 작업과 특정 경우에 나타날 수 있는 제한 사항에 따라 다릅니다.

요소의 높이는 알 수 없습니다

이 상황에서는 다음 네 가지 범용 방법 중 하나를 사용할 수 있습니다.

1. 테이블. 상위는 HTML 또는 디스플레이 테이블/디스플레이 셀을 통해 생성된 테이블 셀이 됩니다. 이 상위 요소에는 수직 정렬: 중간이 지정됩니다.

2. 의사 요소. 외부 블록의 경우 너비=100% 및 수직 정렬: 중간을 사용하여 인라인 블록 의사 요소가 생성됩니다. 자식에게는 display: inline-block 및 Vertical-align: middle이 제공됩니다. 이 방법은 내부 블록에 절대 위치 지정이 지정된 경우에만 작동하지 않습니다.

3. 변신. 부모는 position:relative를 얻습니다. 하위에는 위치: 절대, 상단: 50% 및 변환: 번역Y(-50%);가 지정됩니다.

4. 플렉스박스. 외부 블록은 display: flex로 설정되고, 내부 블록은 margin: auto로 설정됩니다.

아이의 키만 알 수 있다

외부 장치는 상대적인 위치에 있습니다. 내부 요소에는 절대 위치 지정, 상단: 50% 및 높이의 절반에 해당하는 여백 상단이 제공됩니다.

높이가 알려진 블록당 한 줄

외부 블록에는 높이와 동일한 값을 갖는 line-height 속성이 제공됩니다.

외부 블록의 높이는 알려져 있지만 내부 요소는 알려져 있지 않습니다.

부모에는 높이와 동일한 줄 높이가 지정됩니다. 자식의 line-height는 보통이나 원하는 값으로 재정의되며, 여기에는 display: inline-block 및 Vertical-align: middle이 제공됩니다.

요소를 수평 및 수직으로 정렬하는 작업은 다양한 방법으로 수행할 수 있습니다. 방법 선택은 요소 유형(블록 또는 인라인), 위치 지정 유형, 크기 등에 따라 달라집니다.

1. 블록/페이지 중앙에 수평 정렬

1.1. 블록 너비가 지정된 경우:

div ( width: 300px; margin: 0 auto; /*상위 블록 내에서 요소를 수평으로 가운데에 배치합니다*/ )

인라인 요소를 이런 방식으로 정렬하려면 display: block;

1.2. 블록이 다른 블록 내에 중첩되어 있고 너비가 지정/지정되지 않은 경우:

.wrapper(텍스트 정렬: 중앙;)

1.3. 블록에 너비가 있고 상위 블록의 중앙에 배치되어야 하는 경우:

.wrapper (position:relative; /*상위 블록의 상대 위치를 설정하여 그 안에 블록을 절대적으로 배치할 수 있습니다*/) .box ( width: 400px; position: 절대; left: 50%; margin-left: -200px; / *블록을 너비의 절반만큼 왼쪽으로 이동*/ )

1.4. 블록에 지정된 너비가 없으면 상위 래퍼 블록을 사용하여 중앙에 배치할 수 있습니다.

.wrapper (text-align: center; /*블록의 내용을 중앙에 배치*/) .box ( display: inline-block; /*블록을 수평으로 정렬*/ margin-right: -0.25em; /* 블록 사이의 올바른 공백을 제거하십시오*/ )

2. 수직 정렬

2.1. 예를 들어 버튼 및 메뉴 항목의 경우 텍스트가 한 줄을 차지하는 경우:

.button( 높이: 50px; 줄 높이: 50px; )

2.2. 상위 블록 내의 블록을 수직으로 정렬하려면 다음을 수행하십시오.

.wrapper (위치: 상대;).box ( 높이: 100px; 위치: 절대; 상단: 50%; 여백: -50px 0 0 0; )

2.3. 테이블 유형별 수직 정렬:

.wrapper ( 디스플레이: 테이블; 너비: 100%; ) .box ( 디스플레이: 테이블 셀; 높이: 100px; 텍스트 정렬: 중앙; 수직 정렬: 중간; )

2.4. 블록에 지정된 너비와 높이가 있고 상위 블록의 중앙에 배치되어야 하는 경우:

.wrapper( 위치: 상대; ) .box( 높이: 100px; 너비: 100px; 위치: 절대; 위쪽: 0; 오른쪽: 0; 아래쪽: 0; 왼쪽: 0; 여백: 자동; 오버플로: 자동; /*to 내용이 퍼지지 않았습니다 */ )

2.5. CSS3 변환을 사용하여 페이지/블록 중앙에 절대 위치 지정:

요소에 치수가 지정된 경우

div ( width: 300px; /*블록 너비 설정*/ height:100px; /*블록 높이 설정*/ 변환: 번역(-50%, -50%); 위치: 절대; 상단: 50 %; 왼쪽: 50% ; )

요소에 차원이 없고 비어 있지 않은 경우

h1 ( 여백: 0; 변환: 변환(-50%, -50%); 위치: 절대; 위쪽: 50%; 왼쪽: 50%; )

CSS

HTML

레이아웃을 다루어야 했던 많은 분들이 요소를 수직으로 정렬해야 하는 필요성을 경험하셨고, 요소를 중앙에 정렬할 때 발생하는 어려움을 알고 계실 것입니다.

예, CSS에는 수직 정렬을 위한 특별한 다중 값 수직 정렬 속성이 있습니다. 그러나 실제로는 예상대로 전혀 작동하지 않습니다. 이것을 알아 내려고 노력합시다.

다음 접근 방식을 비교해 보겠습니다. 다음을 사용하여 정렬:

• 테이블,
• 들여 쓰기,
• 선 높이
• 스트레칭,
• 마이너스 마진,
• 변환
• 의사 요소
• 플렉스박스.

설명하기 위해 다음 예를 고려하십시오.

두 개의 div 요소가 있으며 그 중 하나가 다른 요소 내에 중첩되어 있습니다. 외부 및 내부에 해당하는 클래스를 제공하겠습니다.

문제는 내부 요소를 외부 요소의 중앙에 정렬하는 것입니다.

먼저 외부 블록과 내부 블록의 치수가 다른 경우를 고려해 보겠습니다. 모두 다 아는. 내부 요소에는 display: inline-block 규칙을 추가하고 외부 요소에는 text-align: center 및 Vertical-align: middle 규칙을 추가해 보겠습니다.

정렬은 인라인 또는 인라인 블록 표시 모드가 있는 요소에만 적용된다는 점을 기억하세요.

블록의 테두리를 볼 수 있도록 블록의 크기와 배경색을 설정해 보겠습니다.

외부(너비: 200px; 높이: 200px; 텍스트 정렬: 중앙; 수직 정렬: 중간; 배경색: #ffc; ) .inner( 디스플레이: 인라인 블록; 너비: 100px; 높이: 100px; 배경색 : #fcc; )
스타일을 적용한 후 내부 블록이 가로로 정렬되지만 세로로 정렬되지 않는 것을 볼 수 있습니다.
http://jsfiddle.net/c1bgfffq/

왜 그런 일이 일어났나요?문제는 수직 정렬 속성이 정렬에 영향을 미친다는 것입니다. 내용이 아닌 요소 자체(표 셀에 적용되는 경우 제외) 따라서 이 속성을 외부 요소에 적용해도 아무 것도 생성되지 않았습니다. 게다가 이 속성을 내부 요소에 적용해도 아무 일도 일어나지 않습니다. 왜냐하면 인라인 블록은 인접한 블록을 기준으로 수직으로 정렬되고 우리의 경우에는 하나의 인라인 블록이 있기 때문입니다.

이 문제를 해결하기 위한 몇 가지 기술이 있습니다. 아래에서는 각각에 대해 자세히 살펴보겠습니다.

테이블을 사용한 정렬

가장 먼저 떠오르는 해결책은 외부 블록을 하나의 셀로 구성된 테이블로 바꾸는 것입니다. 이 경우 셀의 내용, 즉 내부 블록에 정렬이 적용됩니다.

http://jsfiddle.net/c1bgfffq/1/

이 솔루션의 명백한 단점은 의미론적 관점에서 볼 때 정렬에 테이블을 사용하는 것이 올바르지 않다는 것입니다. 두 번째 단점은 테이블을 생성하려면 외부 블록 주위에 다른 요소를 추가해야 한다는 것입니다.

첫 번째 마이너스는 table 및 td 태그를 div로 바꾸고 CSS에서 테이블 표시 모드를 설정하여 부분적으로 제거할 수 있습니다.

.outer-wrapper ( 디스플레이: 테이블; ) .outer ( 디스플레이: 테이블 셀; )
그러나 외부 블록은 여전히 ​​모든 후속 결과가 포함된 테이블로 유지됩니다.

들여쓰기를 사용한 정렬

내부 및 외부 블록의 높이를 알고 있는 경우 다음 공식을 사용하여 내부 블록의 수직 들여쓰기를 사용하여 정렬을 설정할 수 있습니다: (H 외부 – H 내부) / 2.

외부( 높이: 200px; ) .inner( 높이: 100px; 여백: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

이 솔루션의 단점은 두 블록의 높이를 모두 알고 있는 제한된 수의 경우에만 적용 가능하다는 것입니다.

줄 높이를 사용한 정렬

내부 블록이 텍스트 한 줄만 차지해야 한다는 것을 알고 있다면 line-height 속성을 사용하여 외부 블록의 높이와 동일하게 설정할 수 있습니다. 내부 블록의 내용은 두 번째 줄로 넘어가서는 안 되므로 공백: nowrap 및 오버플로: 숨겨진 규칙도 추가하는 것이 좋습니다.

외부( 높이: 200px; 줄 높이: 200px; ) .inner( 공백: nowrap; 오버플로: 숨겨진; )
http://jsfiddle.net/c1bgfffq/12/

이 기술은 내부 블록의 줄 높이 값을 재정의하고 디스플레이: 인라인 블록 및 수직 정렬: 중간 규칙을 추가하는 경우 여러 줄 텍스트를 정렬하는 데에도 사용할 수 있습니다.

외부( 높이: 200px; 줄 높이: 200px; ) .inner( 줄 높이: 일반; 디스플레이: 인라인 블록; 수직 정렬: 중간; )
http://jsfiddle.net/c1bgfffq/15/

이 방법의 단점은 외부 블록의 높이를 알아야 한다는 것이다.

"늘이기"를 사용한 정렬

이 방법은 외부 블록의 높이를 알 수 없으나 내부 블록의 높이를 알 때 사용할 수 있습니다.

이렇게 하려면 다음이 필요합니다.

1. 외부 블록에 상대 위치를 설정하고 내부 블록에 절대 위치를 설정합니다.
2. top: 0 및 lower: 0 규칙을 내부 블록에 추가하면 결과적으로 외부 블록의 전체 높이까지 늘어납니다.
3. 내부 블록의 수직 패딩을 자동으로 설정합니다.

.outer ( 위치: 상대; ) .inner ( 높이: 100px; 위치: 절대; 위쪽: 0; 아래쪽: 0; 여백: 자동 0; )
http://jsfiddle.net/c1bgfffq/4/

이 기술의 기본 아이디어는 늘어나서 절대 위치에 있는 블록의 높이를 설정하면 브라우저가 auto로 설정된 경우 동일한 비율로 수직 패딩을 계산한다는 것입니다.

음수 여백-상단 정렬

이 방법은 널리 알려졌고 매우 자주 사용됩니다. 앞의 것과 마찬가지로 바깥쪽 블록의 높이를 알 수 없으나 안쪽 블록의 높이를 알 때 사용한다.

외부 블록은 상대 위치로, 내부 블록은 절대 위치로 설정해야 합니다. 그런 다음 내부 블록을 외부 블록 상단 높이의 절반인 50%만큼 아래로 이동하고 자체 높이의 절반만큼 올려야 합니다. margin-top: -H 내부 / 2.

외부( 위치: 상대; ) .inner( 높이: 100px; 위치: 절대; 상단: 50%; 여백-상단: -50px; )
http://jsfiddle.net/c1bgfffq/13/

이 방법의 단점은 실내기의 높이를 알아야 한다는 것이다.

변환과 정렬

이 방법은 앞선 방법과 유사하지만, 실내기의 높이를 알 수 없는 경우에 사용할 수 있습니다. 이 경우 음수 픽셀 패딩을 설정하는 대신 변환 속성을 사용하고 TranslateY 함수와 -50% 값을 사용하여 내부 블록을 위로 이동할 수 있습니다.

외부( 위치: 상대; ) .inner( 위치: 절대; 상단: 50%; 변환: 번역Y(-50%); )
http://jsfiddle.net/c1bgfffq/9/

이전 방법에서는 값을 백분율로 설정할 수 없었던 이유는 무엇입니까? 백분율 여백 값은 상위 요소를 기준으로 계산되므로 50% 값은 외부 상자 높이의 절반이 되며 내부 상자를 자체 높이의 절반으로 올려야 합니다. 변환 속성은 이에 적합합니다.

이 방법의 단점은 실내기가 절대 위치 지정 기능을 갖고 있는 경우에는 사용할 수 없다는 점입니다.

Flexbox와의 정렬

수직 정렬의 가장 현대적인 방법은 유연한 상자 레이아웃(일반적으로 Flexbox로 알려져 있음)을 사용하는 것입니다. 이 모듈을 사용하면 페이지의 요소 위치를 유연하게 제어하여 거의 모든 위치에 정렬할 수 있습니다. Flexbox의 중앙 정렬은 매우 간단한 작업입니다.

외부 블록은 display: flex 로 설정하고 내부 블록은 margin: auto 로 설정해야 합니다. 그리고 그게 전부입니다! 아름답지 않나요?

외부( 디스플레이: 플렉스; 너비: 200px; 높이: 200px; ) .inner( 너비: 100px; 여백: 자동; )
http://jsfiddle.net/c1bgfffq/14/

이 방법의 단점은 Flexbox가 최신 브라우저에서만 지원된다는 것입니다.

어떤 방법을 선택해야 합니까?

문제 설명부터 시작해야 합니다.

• 텍스트를 수직으로 정렬하려면 수직 들여쓰기나 line-height 속성을 사용하는 것이 좋습니다.
• 높이가 알려진 절대 위치 요소(예: 아이콘)의 경우 음수 margin-top 속성을 사용하는 방법이 이상적입니다.
• 더 복잡한 경우, 블록 높이를 알 수 없는 경우 의사 요소 또는 변환 속성을 사용해야 합니다.
• 글쎄, 운이 좋아서 이전 버전의 IE 브라우저를 지원할 필요가 없다면 물론 Flexbox를 사용하는 것이 좋습니다.