파이어 폭스에서 표의 세로 맞춤

Question

<table> (또는 <div>과 display:table)을 사용할 때 문제가되는데 어떻게이 표 요소를 세로 가운데에 배치 할 수 있습니까? 물론 크롬에서이 방법 (모든 웹킷 또는 깜박임), 작동을 사용하는 경우

margin: auto; 
position: absolute; 
top: 0; left: 0; bottom: 0; right: 0; 
overflow: auto; 

,하지만 파이어 폭스에서 :

나는 수직 중심의이 방법을 사용했다. Chrome에서이 바이올린 ( http://jsfiddle.net/Mu4yd)을 실행하면 테이블의 중심이 수직으로 표시되는 반면 Firefox에서는 상단에 막대기가 표시됩니다.

Firefox에서 작동하도록 추가해야 할 부분이 있습니까? 또는 두 가지 브라우저에서 테이블을 수직으로 가운데 정렬하는 다른 방법이 있습니까?

Answer 1

A-반응 친절하고 유연한 솔루션이 있습니다를 사용하여 위치를 지정할 수 있습니다. 당신이 사업부의 너비 또는 높이를 모를 경우, 당신은이 CSS3 코드를 사용할 수 있습니다

Vertical align center with transform - fiddle

.valign{ 
    transform: translate(-50%, -50%);  
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

Answer 2

는 다음과 같은 방법

#tablelo{ 
    background-color: black; 
    height: 100px; 
    width: 100px; 
    display: table;  
    margin: -50px 0 0 -50px; 
    position: absolute; 
    top: 50%; left: 50%; 
    overflow: auto; 
} 

Fiddle Demo