절대 위치 div의 버튼을 수직으로 정렬

Question

보통은 절대 위치 지정된 div 안에 top:50% 및 margin-left:-(height/2)이있는 버튼을 가운데에 놓았지만 오늘은 완벽하지 않거나 올바르게 사용하는 방법을 알지 못합니다.

예를 들어 2 가지 예를 들었습니다. 첫 번째 예에서 <a> 태그는 인라인 요소이고 두 번째 예에서는 block 요소입니다. block 요소를 사용한 위치 지정은 완벽하지만 불행히도 너비는 100 %입니다.

display:block;으로 두 번째 예제가 잘 작동하는 이유를 설명하십시오.

저는 크로스 브라우저 솔루션에 관심이 많습니다. 이 간단한 일들을 어떻게합니까? 여기

내 CSS입니다 :

.container { 
    height:240px; 
    position:relative; 
} 

.box { 
    width:200px; 
    height:100%; 
    position:absolute; 
    left:0; 
    top:0; 
    background:yellow; 
    text-align:center; 
    padding:20px; 
} 

#example2 { left: 250px; } 

.btn { 
    display:inline-block; 
    padding:5px 12px; 
    line-height:34px; 
    color:#fff; 
    background:red; 
    position:relative; 
    top:50%; 
    margin-top:-17px; 
} 

#example2 .btn { display:block; } 

.. 그리고 html로

<div class="container"> 
    <div id="example1" class="box"> 
     <a href="" class="btn">button</a> 
    </div> 
    <div id="example2" class="box"> 
     <a href="" class="btn">button</a> 
    </div> 
</div> 

온라인 버전은 http://jsfiddle.net/79hqgabq/2/

Answer 1

표시되는 정렬 문제는 margin-top: -17px 선으로 발생되고에서 확인할 수있다 .btn 클래스에서 삭제 된 해당 행과 함께 업데이트 된 바이올린에서 볼 수 있듯이 Updated Demo

또 다른 주목할 점은 기존 CSS 선택기에서 세로 맞춤이 문제가있는 것으로 알려져 있으며 구형 브라우저를 지원하지 않을 경우 Flexbox으로 전환하는 것이 좋습니다.

다음은 새로운 display: flex 선택 자와 해당 하위 선택 자의 문제입니다 : Demo w/ Flexbox입니다. 이렇게하면 적절한 수직 정렬을 위해 픽셀 퍼지 (fudge)에 대한 강조가 제거됩니다.

새로운 .box 클래스

.box { 
    width:200px; 
    height:100%; 
    position:absolute; 
    left:0; 
    top:0; 
    background:yellow; 
    text-align:center; 
    padding:20px; 
    /* New lines for alignment */ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

새로운 .btn 클래스 (단지 기존의 태그를 제거)

.btn { 
    display:inline-block; 
    padding:5px 12px; 
    line-height:34px; 
    color:#fff; 
    background:red; 
} 

편집 : 블록 요소를 조사한 후 부모의 100 %로 확대 할 수있는 속성이 컨테이너. 자세한 내용은 here에서 설명 할 수 있습니다. 따라서 display:block div가 .box 클래스의 패딩에 도달 할 때까지 확장됩니다.

display: inline-block 요소가 약간 잘못 정렬 된 이유는 기본적으로 baseline에 정렬되어 있기 때문입니다. 참조 용으로 here을 참조하십시오. div의 수직 정렬을 vertical-align: top으로 변경하면 문제가 해결됩니다.

여기에 추가 된 vertical-align: middle 속성을 사용하여 이전 구문을 모두 사용하는 새로운 fiddle이 있습니다.