CSS,

HTML.

레이아웃을 재생 해야하는 많은 사람들이 요소를 수직으로 정렬하고 중앙에 요소를 정렬 할 때 발생하는 어려움을 알아야합니다.

예, CSS의 수직 정렬의 경우 많은 값과 수직 정렬의 특수 버전이 있습니다. 그러나 실제로는 예상대로 전혀 작동합니다. 그것을 알아 내려고 노력합시다.

다음과 같은 접근 방식을 비교하십시오. 정렬 :

• 테이블,
• 들여 쓰기
• 라인 높이,
• 스트레칭
• 부정적인 마진,
• 변환,
• 의사 - 요소
• flexbox.

그림으로 다음 예제를 고려하십시오.

두 개의 DIV 요소가 있으며, 그 중 하나는 다른 사람이 내장되어 있습니다. 우리는 그들에게 적절한 수업을 제공합니다 - 바깥 쪽과 내부.

작업은 내부 요소를 외부 요소의 가운데에 정렬하는 것입니다.

시작하려면 외부 및 내부 블록의 크기가있는 경우를 고려하십시오. 모두 다 아는...에 내부 요소 추가 표시 규칙 : 인라인 블록 및 외부 텍스트 - 정렬 : 가운데 및 수직 정렬 : 중간.

정렬이 인라인 또는 인라인 블록 디스플레이 모드가있는 요소에만 적용되는 NPOMNIA.

우리는 블록 크기뿐만 아니라 그들의 테두리를 볼 수있는 배경색을 설정합니다.

바깥 쪽 (폭 : 200px, 높이 : 200px, 텍스트 정렬 : 센터; 수직 정렬 : 중간; 배경색 : #ffc;) 내부 (디스플레이 : 인라인 블록; 너비 : 100px, 높이 : 100px, 배경색 : #fcc;)
스타일을 적용한 후, 내부 블록이 수평으로 평평하게되고 수직이 없음을 알 수 있습니다.
http://jsfiddle.net/c1bgfffq/

왜 일이 일어 났습니까? 사실은 수직 정렬 속성이 정렬에 영향을 미치는 것입니다. 요소 자체가 아니라 그 내용이 아닙니다 (테이블 셀에 적용되는 경우를 제외하고). 따라서이 속성을 외부 요소에 사용하면 아무 것도 없었습니다. 또한, 소문자 블록 (인라인 블록)은 이웃 블록에 대해 세로로 수직으로 정렬 되므로이 속성을 사용하는 것은 아무 것도 제공 할 것입니다. 그리고 우리의 경우 소문자 블록이 하나 있습니다.

이 문제를 해결하기 위해 몇 가지 기술이 있습니다. 아래는 각각을 고려해야합니다.

표를 사용하여 정렬

첫 번째 허점 솔루션은 테이블의 외부 블록을 하나의 셀에서 교체하는 것입니다. 이 경우, 정렬은 셀의 내용물, 즉 내부 블록에 적용됩니다.

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

명백한 마이너스 이 솔루션 - 의미론의 관점에서 정렬을 위해 테이블을 잘못 적용합니다. 두 번째 빼기는 테이블을 만들려면 외부 블록 주위에 다른 요소를 추가해야한다는 것입니다.

첫 번째 마이너스는 부분적으로 제거하고 테이블 및 TD 태그를 DIV에서 교체하고 CSS의 테이블 디스플레이 모드를 설정할 수 있습니다.

.Outer-Wrapper (디스플레이 : 표;) .Outer (디스플레이 : 표 - 셀;)
그럼에도 불구하고 외부 장치는 여전히 모든 결과를 가진 테이블로 남아 있습니다.

들여 쓰기와의 정렬

내부 및 외부 블록의 높이가 알려지면 공식을 사용하여 내부 유닛의 수직 인구를 사용하여 정렬을 묻는 것을 묻는 메시지를 표시 할 수 있습니다.

바깥 쪽 (높이 : 200px;) .inner (높이 : 100px, 여백 : 50px 0;)
http://jsfiddle.net/c1bgfffq/6/

마이너스 솔루션 - 두 블록이 알려질 때 제한된 수의 사례에만 적용됩니다.

선 높이 정렬

내부 단위가 텍스트의 한 줄을 더 이상 취해야하는 것으로 알려지면 Line-Height 속성을 사용하고 외부 블록의 동일한 높이를 설정할 수 있습니다. 내부 유닛의 내용을 두 번째 줄로 전송해서는 안되기 때문에, 흰색 공간 규칙을 추가하는 것이 좋습니다. NowRap 및 Overflow : 숨김.

바깥 쪽 (높이 : 200px, 선 - 높이 : 200px;) .inner (화이트 - 공간 : NowRap; 오버플로 : 숨김;)
http://jsfiddle.net/c1bgfffq/12/

또한이 기술은 실내기가 라인 높이 값을 무시할뿐만 아니라 디스플레이 추가 : 인라인 블록 및 수직 정렬 : 중간에도 다중 줄 텍스트의 정렬에 적용될 수 있습니다.

바깥 쪽 (높이 : 200px, 선 - 높이 : 200px;) .inner (라인 높이 : 정상; 디스플레이 : 인라인 블록, 수직 \u200b\u200b정렬 : 중간)
http://jsfiddle.net/c1bgfffq/15/

마이너스 이 방법 그것은 외부 블록의 높이가 알려야한다는 것입니다.

"스트레칭"과의 정렬

이 방법은 외부 블록의 높이가 알려지지 만 내부의 높이를 알 수 없을 때 사용할 수 있습니다.

이를 위해 다음과 같습니다.

1. 외부 블록 상대 위치 설정 및 내부 절대;
2. 상단의 내부 블록을 추가 : 0 및 아래쪽 : 0, 외부 블록의 전체 높이로 늘어납니다.
3. 실내기의 수직 압입에 대한 자동 값을 설정하십시오.

.Outer (위치 : 상대] 내부 (높이 : 100px; 위치 : 절대, 상단 : 0; 하단 : 0; 여백 : 자동 0;)
http://jsfiddle.net/c1bgfffq/4/

이 기술의 본질은 늘어진 및 절대적으로 정속 블록의 높이 세트가 해당 값이 자동으로 설정된 경우 수직 계좌를 계산하도록 브라우저가 동일한 비율로 계산됩니다.

부정적인 여백 탑의 도움으로 정렬

이 방법은 넓은 명성을 얻었으며 매우 자주 사용됩니다. 이전의 것으로, 외부 블록의 높이가 알려지지 만 내부의 높이가 알려지지 않은 경우에 사용됩니다.

상대 위치의 외부 블록을 지정해야하며 내부는 절대적입니다. 그런 다음 내부 블록을 외부 블록 상단의 높이를 절반으로 움직일 필요가 있습니다. 50 % 및 높은 높이의 여백 상단의 절반을 높이십시오 : -h 내부 / 2.

바깥 쪽 (위치 : 상대;) .inner (높이 : 100px, 위치 : 절대, 상단 : 50 %, 마진 탑 : -50px;)
http://jsfiddle.net/c1bgfffq/13/

이 방법의 마이너스 - 실내기의 높이는 알려야합니다.

변환과의 정렬

이 방법은 이전과 유사하지만 내부 블록의 높이가 알 수 없을 때 적용 할 수 있습니다. 이 경우, 픽셀 단위로 음의 리타 데이션을 설정하는 대신 변환 속성을 사용하고 변환 기능을 사용하여 내부 블록을 올릴 수 있고 -50 % 값을 사용할 수 있습니다.

바깥 쪽 (위치 : 상대;) .inner (위치 : 절대, 상단 : 50 %, 변환 : 번역 (-50 %);)
http://jsfiddle.net/c1bgfffq/9/

왜 이전 방식으로 가치를 백분율로 설정하는 것은 불가능 했습니까? 마진 속성의 백분율 값은 상위 요소에 대해 계산되므로 50 %의 값은 외부 블록의 높이의 절반이며 내부 블록을 자체 높이의 절반에 올릴 필요가있었습니다. 이를 위해 변환 속성이 \u200b\u200b적합합니다.

이 방법의 빼기 - 내부 장치에 절대 위치가있는 경우에는 적용 할 수 없습니다.

FlexBox와의 정렬

가장 현대적인 수직 정렬 방법은 유연한 상자 레이아웃을 사용하는 것입니다 (사람들은 FlexBox로 알려져 있습니다). 이 모듈을 사용하면 실질적으로 아무 것도 없어 페이지의 항목의 위치 지정을 유연하게 제어 할 수 있습니다. FlexBox의 센터의 정렬은 매우 간단한 작업입니다.

외부 유닛은 디스플레이를 설정해야합니다. FLEX 및 내부 - 여백 : 자동. 그리고 그것은 모두 다! 아름답고, 그렇지?

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

이 방법의 빼기 - FlexBox는 최신 브라우저에서만 지원됩니다.

선택하는 방법은 무엇입니까?

문제의 설정에서 진행할 필요가 있습니다.

• 수직 텍스트 정렬의 경우 세로 채취자 또는 Line-Height 속성을 사용하는 것이 좋습니다.
• 알려진 높이 (예 : 아이콘)가있는 절대적으로 위치한 요소의 경우, 음수 마진 탑 속성이있는 방법이 이상적입니다.
• 이상 복잡한 경우블록 높이가 알려지지 않은 경우 의사 요소 또는 변환 속성을 사용해야합니다.
• 글쎄, 당신이 운이 좋다면 IE 브라우저의 오래된 버전을 유지할 필요가 없으므로 FlexBox를 사용하는 것이 좋습니다.

매우 자주 페이지 / 화면의 중심에 블록을 정렬하는 작업이 있으며, 하드 크기 또는 부정적인 들여 쓰기가없는 Java 스크립트 없이는 블록이 초과하는 경우 부모에서 작업 한 스크롤 막대가 작동하는 작업이 있습니다. 그것의 치수. 네트워크에서는 화면 중앙에 블록을 정렬하는 방법이 꽤 많은 단조로운 예가 있습니다. 규칙적으로 대부분은 어떤 원리를 기반으로합니다.

다음은 문제를 해결하는 주요 방법, 장단점입니다. 예제의 본질을 이해하기 위해 지정된 링크의 예제에서 결과 창의 높이 / 너비를 줄이는 것이 좋습니다.

옵션 1. 음수 들여 쓰기.

위치 결정 블록 속성 상단 및 왼쪽 50 %, 블록의 높이와 너비를 알고, 우리는 크기의 절반과 동일한 부정적인 여백을 지정합니다. 헐 박리...에 이 옵션의 거대한 단점은 부정적인 들여 쓰기를 계산해야한다는 것입니다. 같은 블록 ScrollBarov가 둘러싸인 올바르게 작동하지는 않습니다. 즉, 부정적인 들여 쓰기로는 단순히 할례 를가합니다.

부모 (너비 : 100 %, 높이 : 100 %, 위치 : 절대; 위쪽 : 0; 왼쪽 : 0; 오버플로 : 자동;) .block (폭 : 250px, 높이 : 250px, 위치 : 절대, 상단 : 50 %; : 50 %, 여백 : -125px 0 0 -125px; img (최대 너비 : 100 %, 높이 : 자동, 디스플레이 : 블록; 여백 : 0 자동, 테두리 : 없음))

옵션 2. 자동 들여 쓰기.

덜 일반적이지만 첫 번째와 유사합니다. 에 대한 헐 박리 왼쪽 하단 속성을 0만큼 포지셔닝하는 폭과 높이를 지정하고 여백 자동을 지정합니다. 이 옵션은 노동자 스크롤 막대입니다 부모의후자가 100 % 너비와 높이를 설정하면됩니다. 이 방법의 단점은 크기의 단단한 작업입니다.

부모 (너비 : 100 %, 높이 : 100 %; 위치 : 절대; 위쪽 : 0; 왼쪽 : 0; 오버플로 : 자동;) .block (너비 : 250px, 높이 : 250px; 위치 : 절대; top : 0; 오른쪽 : 0; 아래쪽 : 0; 왼쪽 : 0; 여백 : 자동; img (최대 너비 : 100 %, 높이 : 자동, 디스플레이 : 블록; 마진 : 0 자동, 테두리 : 없음))

옵션 3. 테이블.

지정하십시오 부모의 테이블 스타일, 셀 부모의 중앙에 텍스트 정렬을 설치하십시오. 그러나 블록 우리는 선 블록의 모델을 지정합니다. 우리는 비 근로자 스크롤 바, 일반적으로 테이블의 "에뮬레이션"의 미학이 아닙니다.

부모 (너비 : 100 %, 높이 : 100 %, 디스플레이 : 표; 위치 : 자세 : 절대; 상단 : 0; 왼쪽 : 0;\u003e .inner (디스플레이 : 표 - 셀; 텍스트 - 정렬 : 센터, 수직 정렬 : 중간; )). 블록 (디스플레이 : 인라인 블록; IMG (디스플레이 : 블록, 테두리 : 없음;))

이 예제에 스크롤을 추가하려면 다른 항목을 디자인에 추가해야합니다.
예 : jsfiddle.net/serdidg/fk5nqh52/3.

옵션 4. 의사 요소.

이 옵션은 이전 방법에 나열된 모든 문제가 없으며 초기 작업을 해결할 수 있습니다. 본질은 다음과 같습니다 부모의 스타일 세트 의사 - 요소 이전, 즉 100 % 높이, 센터 및 라인 블록의 모델의 정렬. 또한 그 자체와 헐 박리 라인 블록의 모델이 설정되어 중앙에 정렬됩니다. 에 블록 "떨어졌다"는 아닙니다 의사 - 요소첫 번째 크기가 더 많이있을 때 부모의가리키다 부모의 화이트 공간 : NowRap 및 글꼴 크기 : 0, 그 후 헐 박리 우리는 다음과 같이이 스타일을 취소합니다 - 공백 : 정상. 에 이 예제 글꼴 크기 : 결과 공간을 제거하려면 0이 필요합니다. 부모의 과 블록 서식 코드로 인해. 공간은 다른 방법으로 제거 될 수 있지만 최선은 방금 허용되지 않는 것으로 간주됩니다.

부모 (너비 : 100 %, 높이 : 100 %; 위치 : 절대 : top : 0; 왼쪽 : 0; 오버플로 : 자동; 공백 : NowRap; 텍스트 - 정렬 : 센터; 글꼴 크기 : 0; 이전 ( 높이 : 100 %; 디스플레이 : 인라인 블록; 수직 정렬 : 중간; 내용 : "";)) .block (디스플레이 : 인라인 블록; 공백 : 정상; 수직 정렬 : 중간; 텍스트 - 정렬 : 왼쪽; ; img (디스플레이 : 블록, 테두리 : 없음))

또는 전체 페이지가 아닌 창의 높이와 너비 만 부모가 필요한 경우 :

부모 (위치 : 고정; 상단 : 0; 오른쪽 : 0; 하단 : 0; 왼쪽 : 0; 오버플로 : 자동; 화이트 공간 : NowRap; 텍스트 - 정렬 : 센터, 글꼴 크기 : 0; 이전 (높이 : 100 %; 디스플레이 : 인라인 블록; 수직 정렬 : 중간; 내용 : "";)) .block (디스플레이 : 인라인 블록, 화이트 공간 : 정상; 수직 정렬 : 중간, 텍스트 - 정렬 : 왼쪽, img (디스플레이 : 블록, 테두리 : 없음;))

5. FlexBox 옵션.

가장 간단하고 우아한 방법 중 하나는 FlexBox를 사용하는 것입니다. 여분의 텔레비티가 필요하지 않으며, 일어나는 일의 본질을 분명히 묘사하고 높은 유연성을 가지고 있습니다. 이 방법을 선택할 때 기억할 가치가있는 유일한 것은 10 번째 버전의 IE를 지원합니다. caniuse.com/#feat\u003dflexbox.

부모 (너비 : 100 %, 높이 : 100 %; 위치 : 고정; 상단 : 0; 왼쪽 : 0; 디스플레이 : flex; 정렬 항목 : 센터; 정렬 내용 : 센터; 정렬 - 내용 : 가운데; 오버플로 : 자동; ). 블록 (배경 : # 60A839, IMG (디스플레이 : 블록, 테두리 : 없음, 없음))

옵션 6. 변환.

우리가 구조체로 제한되는 경우 적합하며, 부모 요소를 조작 할 수있는 가능성은 없으며, 블록이 어떻게 든 필요한 것으로 정렬 할 수 있습니다. CSS는 CSS 기능 translate ()를 받게됩니다. 값 50 %를 사용하면 절대 위치 지정이 블록의 왼쪽 상단 모서리가 중앙에 정확히 정확히 배치되면 음수 변환 값은 해당 크기와 관련하여 블록을 이동합니다. 부정적인 영향은 흐리게 얼굴이나 글꼴에 불리한 형태로 나타날 수 있습니다. 또한이 방법은 Java 스크립트를 사용하여 블록 위치를 계산하는 데 문제가 발생할 수 있습니다. "때로는 50 %의 폭의 손실을 보완하기 위해 cSS를 사용합니다. 왼쪽 속성은 블록으로 설정된 규칙을 도울 수 있습니다 : Margin-right : -50 %; ...에

부모 (폭 : 100 %, 높이 : 100 %, 위치 : 고정; 정상 : 0; 왼쪽 : 0; 오버플로 : 자동;) .block (위치 : 절대, 상단 : 50 %, 왼쪽 : 50 %, 변형 : 번역) -50 %, -50 %); IMG (디스플레이 : 블록;))

옵션 7. 버튼.

사용자 azProduction 옵션 블록 버튼 태그 프레임입니다. 버튼에는 내부에있는 모든 것을 중앙에 센터하는 속성, 즉 선 및 블록 하강 (인라인 블록) 모델의 요소가 있습니다. 실제로 사용하지 않는 것이 좋습니다.

부모 (너비 : 100 %, 높이 : 100 %; 위치 : 절대; 위쪽 : 0; 왼쪽 : 0; 오버플로 : 자동; 배경 : 없음; 테두리 : 없음; 개요 : 없음; 블록 (디스플레이 : 인라인 블록; img (디스플레이 : 블록; 경계 : 없음;))

보너스

4 번째 옵션의 아이디어를 사용하여 외부 들여 쓰기를 설정할 수 있습니다. 헐 박리그리고 동시에 후자는 ScrollBarov로 둘러싸인 적절하게 표시됩니다.
예 : jsfiddle.net/serdidg/nfqg9rza/2.

그림을 중앙에 정렬 할 수도 있고 그림이 더 많은 경우에도 맞 춥니 다. 부모의크기로 확장하십시오 부모의.
예 : jsfiddle.net/serdidg/nfqg9rza/3.
큰 그림과의 예 :

매우 자주 페이지 / 화면의 중심에 블록을 정렬하는 작업이 있으며, 하드 크기 또는 부정적인 들여 쓰기가없는 Java 스크립트 없이는 블록이 초과하는 경우 부모에서 작업 한 스크롤 막대가 작동하는 작업이 있습니다. 그것의 치수. 네트워크에서는 화면 중앙에 블록을 정렬하는 방법이 꽤 많은 단조로운 예가 있습니다. 규칙적으로 대부분은 어떤 원리를 기반으로합니다.

다음은 문제를 해결하는 주요 방법, 장단점입니다. 예제의 본질을 이해하기 위해 지정된 링크의 예제에서 결과 창의 높이 / 너비를 줄이는 것이 좋습니다.

옵션 1. 음수 들여 쓰기.

위치 결정 블록 속성 상단 및 왼쪽 50 %, 블록의 높이와 너비를 알고, 우리는 크기의 절반과 동일한 부정적인 여백을 지정합니다. 헐 박리...에 이 옵션의 거대한 단점은 부정적인 들여 쓰기를 계산해야한다는 것입니다. 같은 블록 ScrollBarov가 둘러싸인 올바르게 작동하지는 않습니다. 즉, 부정적인 들여 쓰기로는 단순히 할례 를가합니다.

부모 (너비 : 100 %, 높이 : 100 %, 위치 : 절대; 위쪽 : 0; 왼쪽 : 0; 오버플로 : 자동;) .block (폭 : 250px, 높이 : 250px, 위치 : 절대, 상단 : 50 %; : 50 %, 여백 : -125px 0 0 -125px; img (최대 너비 : 100 %, 높이 : 자동, 디스플레이 : 블록; 여백 : 0 자동, 테두리 : 없음))

옵션 2. 자동 들여 쓰기.

덜 일반적이지만 첫 번째와 유사합니다. 에 대한 헐 박리 왼쪽 하단 속성을 0만큼 포지셔닝하는 폭과 높이를 지정하고 여백 자동을 지정합니다. 이 옵션은 노동자 스크롤 막대입니다 부모의후자가 100 % 너비와 높이를 설정하면됩니다. 이 방법의 단점은 크기의 단단한 작업입니다.

부모 (너비 : 100 %, 높이 : 100 %; 위치 : 절대; 위쪽 : 0; 왼쪽 : 0; 오버플로 : 자동;) .block (너비 : 250px, 높이 : 250px; 위치 : 절대; top : 0; 오른쪽 : 0; 아래쪽 : 0; 왼쪽 : 0; 여백 : 자동; img (최대 너비 : 100 %, 높이 : 자동, 디스플레이 : 블록; 마진 : 0 자동, 테두리 : 없음))

옵션 3. 테이블.

지정하십시오 부모의 테이블 스타일, 셀 부모의 중앙에 텍스트 정렬을 설치하십시오. 그러나 블록 우리는 선 블록의 모델을 지정합니다. 우리는 비 근로자 스크롤 바, 일반적으로 테이블의 "에뮬레이션"의 미학이 아닙니다.

부모 (너비 : 100 %, 높이 : 100 %, 디스플레이 : 표; 위치 : 자세 : 절대; 상단 : 0; 왼쪽 : 0;\u003e .inner (디스플레이 : 표 - 셀; 텍스트 - 정렬 : 센터, 수직 정렬 : 중간; )). 블록 (디스플레이 : 인라인 블록; IMG (디스플레이 : 블록, 테두리 : 없음;))

이 예제에 스크롤을 추가하려면 다른 항목을 디자인에 추가해야합니다.
예 : jsfiddle.net/serdidg/fk5nqh52/3.

옵션 4. 의사 요소.

이 옵션은 이전 방법에 나열된 모든 문제가 없으며 초기 작업을 해결할 수 있습니다. 본질은 다음과 같습니다 부모의 스타일 세트 의사 - 요소 이전, 즉 100 % 높이, 센터 및 라인 블록의 모델의 정렬. 또한 그 자체와 헐 박리 라인 블록의 모델이 설정되어 중앙에 정렬됩니다. 에 블록 "떨어졌다"는 아닙니다 의사 - 요소첫 번째 크기가 더 많이있을 때 부모의가리키다 부모의 화이트 공간 : NowRap 및 글꼴 크기 : 0, 그 후 헐 박리 우리는 다음과 같이이 스타일을 취소합니다 - 공백 : 정상. 이 예제에서는 결과 공간을 제거하려면 font-size : 0이 필요합니다. 부모의 과 블록 서식 코드로 인해. 공간은 다른 방법으로 제거 될 수 있지만 최선은 방금 허용되지 않는 것으로 간주됩니다.

부모 (너비 : 100 %, 높이 : 100 %; 위치 : 절대 : top : 0; 왼쪽 : 0; 오버플로 : 자동; 공백 : NowRap; 텍스트 - 정렬 : 센터; 글꼴 크기 : 0; 이전 ( 높이 : 100 %; 디스플레이 : 인라인 블록; 수직 정렬 : 중간; 내용 : "";)) .block (디스플레이 : 인라인 블록; 공백 : 정상; 수직 정렬 : 중간; 텍스트 - 정렬 : 왼쪽; ; img (디스플레이 : 블록, 테두리 : 없음))

또는 전체 페이지가 아닌 창의 높이와 너비 만 부모가 필요한 경우 :

부모 (위치 : 고정; 상단 : 0; 오른쪽 : 0; 하단 : 0; 왼쪽 : 0; 오버플로 : 자동; 화이트 공간 : NowRap; 텍스트 - 정렬 : 센터, 글꼴 크기 : 0; 이전 (높이 : 100 %; 디스플레이 : 인라인 블록; 수직 정렬 : 중간; 내용 : "";)) .block (디스플레이 : 인라인 블록, 화이트 공간 : 정상; 수직 정렬 : 중간, 텍스트 - 정렬 : 왼쪽, img (디스플레이 : 블록, 테두리 : 없음;))

5. FlexBox 옵션.

가장 간단하고 우아한 방법 중 하나는 FlexBox를 사용하는 것입니다. 여분의 텔레비티가 필요하지 않으며, 일어나는 일의 본질을 분명히 묘사하고 높은 유연성을 가지고 있습니다. 이 방법을 선택할 때 기억할 가치가있는 유일한 것은 10 번째 버전의 IE를 지원합니다. caniuse.com/#feat\u003dflexbox.

부모 (너비 : 100 %, 높이 : 100 %; 위치 : 고정; 상단 : 0; 왼쪽 : 0; 디스플레이 : flex; 정렬 항목 : 센터; 정렬 내용 : 센터; 정렬 - 내용 : 가운데; 오버플로 : 자동; ). 블록 (배경 : # 60A839, IMG (디스플레이 : 블록, 테두리 : 없음, 없음))

옵션 6. 변환.

우리가 구조체로 제한되는 경우 적합하며, 부모 요소를 조작 할 수있는 가능성은 없으며, 블록이 어떻게 든 필요한 것으로 정렬 할 수 있습니다. CSS는 CSS 기능 translate ()를 받게됩니다. 값 50 %를 사용하면 절대 위치 지정이 블록의 왼쪽 상단 모서리가 중앙에 정확히 정확히 배치되면 음수 변환 값은 해당 크기와 관련하여 블록을 이동합니다. 부정적인 영향은 흐리게 얼굴이나 글꼴에 불리한 형태로 나타날 수 있습니다. 또한이 방법은 Java 스크립트를 사용하여 블록의 위치를 \u200b\u200b계산하는 데 문제가 발생할 수 있습니다. 마진 오른쪽 : -50 %;

부모 (폭 : 100 %, 높이 : 100 %, 위치 : 고정; 정상 : 0; 왼쪽 : 0; 오버플로 : 자동;) .block (위치 : 절대, 상단 : 50 %, 왼쪽 : 50 %, 변형 : 번역) -50 %, -50 %); IMG (디스플레이 : 블록;))

옵션 7. 버튼.

사용자 옵션 블록 버튼 태그 프레임입니다. 버튼에는 내부에있는 모든 것을 중앙에 센터하는 속성, 즉 선 및 블록 하강 (인라인 블록) 모델의 요소가 있습니다. 실제로 사용하지 않는 것이 좋습니다.

부모 (너비 : 100 %, 높이 : 100 %; 위치 : 절대; 위쪽 : 0; 왼쪽 : 0; 오버플로 : 자동; 배경 : 없음; 테두리 : 없음; 개요 : 없음; 블록 (디스플레이 : 인라인 블록; img (디스플레이 : 블록; 경계 : 없음;))

보너스

4 번째 옵션의 아이디어를 사용하여 외부 들여 쓰기를 설정할 수 있습니다. 헐 박리그리고 동시에 후자는 ScrollBarov로 둘러싸인 적절하게 표시됩니다.
예 : jsfiddle.net/serdidg/nfqg9rza/2.

그림을 중앙에 정렬 할 수도 있고 그림이 더 많은 경우에도 맞 춥니 다. 부모의크기로 확장하십시오 부모의.
예 : jsfiddle.net/serdidg/nfqg9rza/3.
큰 그림과의 예 :

CSS에서 텍스트 수평을 수평화합니다 - 매우 어려운 일. 나는 이것과 싸우는 것으로 충분한 사람들을 보았고, 실제 적응 형 디자인에 관해서는 "중요한"오류를 지속적으로 발견했습니다.

그러나 두려워하지 마십시오 : 당신이 이미 CSS 수직 정렬으로 어려움을 겪고있는 경우 - 당신은 주소에 호소했습니다.

속성 CSS 수직 정렬에 대해 이야기하십시오

방금 웹 개발 지역에서 일하기 시작했을 때, 나는이 속성을 조금 고통 받았다. 나는 그것이 고전적인 재산으로 일해야한다고 생각했다. " 텍스트 정렬." 아, 모든 것이 너무 쉬워 졌다면 ...

CSS 속성 세로 정렬 그것은 테이블로 훌륭하게 작동하지만 div 또는 다른 요소는 아닙니다. DIV에 사용할 때 다른 블록과 관련된 요소가 아니라 내용이 아닙니다. 이 경우 속성은 표시 : 인라인 블록에서만 작동합니다. ...에

예를 봐

우리는 그 내용을 가운데, 그리고 Div 자신이 아닌가요!

두 개의 출력이 있습니다. 텍스트가있는 DIV 요소 만 있으면 LINE-HEART 속성을 사용할 수 있습니다. 즉, 요소의 높이를 알아야하지만 설치가 불가능합니다. 따라서 텍스트가 항상 중앙에있을 것입니다.

이 접근법에서는 진실합니다 수직 정렬 CSS. 결함이 있습니다. 텍스트가 다중 줄이면 문자열의 높이가 행 수를 곱합니다. 대부분이 경우에는 끔찍한 버너 페이지가 있습니다.

이 예제를 살펴보십시오

센터를 원하는 내용이 동일한 줄보다 더 많은 경우 테이블 Div를 사용하는 것이 좋습니다. 테이블을 사용할 수도 있지만 의미 론적으로 올바르지 않습니다. 적응 형 목적을위한 틈이 필요한 경우 DIV 요소를 사용하는 것이 좋습니다.

일하고, 디스플레이가있는 부모 컨테이너가 있어야합니다. 테이블, 내부 - 적절한 금액 디스플레이가있는 열을 가운데에 가운지 : 표 - 셀 및 세로 정렬 : 중간.

예를 봐

왜 표식 마크 업으로 작동하지만 Div 요소는 아닙니다. 테이블의 행은 동일한 높이 때문입니다. 테이블 테이블의 내용이 높이의 사용 가능한 모든 공간을 사용하지 않으면 브라우저가 자동으로 세로 채우기를 핵심 콘텐츠에 추가합니다.

재산 위치

CSS DIV의 수직 수준의 기본 사항으로 시작합시다.

• 위치 : static이 기본값입니다. 요소는 HTML의 순서에 따라 표시됩니다.
• 위치 : 요소의 정확한 위치를 결정하는 데 절대적입니다. 이 위치는 항상 가장 가까운 상대적으로 위치 된 부모 요소와 관련이 있습니다 ( 공전.짐마자 요소의 정확한 위치를 정의하지 않으면 제어가 끊어집니다. 우연히 표시되고 문서의 흐름을 완전히 무시합니다. 기본적으로 요소는 왼쪽 상단 모서리에 표시됩니다.
• 위치 : 상대 - 정상 위치 (정적)에 상대적으로 항목을 배치하는 데 사용됩니다. 이 값은 문서 흐름의 순서를 유지합니다.
• 위치 : 고정 - 브라우저 창에 상대적인 항목을 배치하는 데 사용되므로 항상보기 영역에 표시됩니다.

참고 : 일부 속성 ( 탑 및 Z- 색인) 위치로 설정된 경우에만 작동하십시오 ( 공전.).

그 시점에 가자!

구현하고 싶습니다 CSS 정렬 수직의 중심에~을 빼앗아가는 것 먼저 상대 위치와 크기가있는 항목을 만듭니다. 예 : 100 % 너비와 높이.

두 번째 단계는 대상 브라우저에 따라 다를 수 있지만 두 가지 옵션 중 하나를 사용할 수 있습니다.

• 오래된 속성 : 높이의 너비와 절반의 절반을 제거하기 위해 창의 정확한 크기를 알아야합니다. 예를 봐;
• 새로운 속성 CSS3.: 변환 속성을 번역 50 % 값으로 추가 할 수 있으며 장치가 항상 센터에있을 수 있습니다. 보기 예제.

원칙적으로 콘텐츠를 중심으로하고 싶다면, 상단을 사용하지 마십시오 : 40 % 또는 왼쪽 : 300px. 테스트 스크린에서 훌륭하게 작동하지만, 이것은 센터링이 아닙니다.

위치를 기억하십시오 : 고정? 절대 위치와 동일하게 만들 수 있지만 상위 요소에 대한 상대 위치가 필요하지 않습니다. 항상 브라우저 창을 상대적으로 배치됩니다.

FlexBox 사양에 대해 들어 보셨습니까?

FlexBox를 사용할 수 있습니다. 다른 옵션보다 훨씬 낫습니다. 텍스트 동등한 텍스트 cSS 센터 수직으로...에 FlexBox를 사용하면 요소 제어가 어린이 게임과 유사합니다. 문제는 아래의 IE9 및 버전과 같은 일부 브라우저를 삭제해야한다는 것입니다. 다음은 세로 중심 블록의 방법의 예입니다.

보기 예제

Flexbox 위치를 사용하면 여러 블록을 가운데로 가운데 할 수 있습니다.

이 예제에서 배운 것을 적용하면 마스터 할 수 있습니다. CSS 수직 정렬 블록 최대한 빨리.

링크 및 추가 문헌

연구 CSS 마크 업

Flexbox Froggy.

샌드 박스 FlexBox.

기사 번역 모든 사람을위한 CSS 수직 정렬 (Dummies 포함)"친절한 팀 팀이 준비했습니다.

수직 대상물을 크레이트하는 몇 가지 근본적으로 다른 방법이 있습니다. cSS를 사용합니다.그러나 어려움은 오른쪽을 선택할 수 있습니다. 우리는 그들 중 일부를 살펴볼 것이며, 또한 얻은 지식을 사용하여 작은 사이트를 만듭니다.

수직 정렬 CSS가있는 중앙에는 그렇게 쉽지 않습니다. 모든 브라우저에서는 여러 가지 방법이 있으며 모든 브라우저에서 작동하지 않습니다. 5를 보자. 다양한 방법뿐만 아니라 "for"와 "반대" 예.

첫 번째 방법

이 방법은 우리가 일부 요소를 설정했다고 가정합니다