дисплей таблица может быть центром в Chrome, но светлячок не показывает в центре

Question

Я хочу иметь div в центре по вертикали и по горизонтали с display:table, и он работает очень хорошо в хроме, но Firefox не показывает, что правильно.

div идентификатор #content:

#content { 
 
    background: red; 
 
    width: 367px; 
 
    height: 441px; 
 
    display: table; 
 
} 
 

 
.centered { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    margin: auto; 
 
}

<div id="content" class="centered"> 
 
    <img src="https://www.google.com/images/srpr/logo11w.png" id="img-logo" alt="Google logo"> 
 
</div>

jsfiddle

Answer 1

Для CSS2, вы можете использовать table-cell центрировать содержимое:

#content { 
 
     background: red; 
 
     width: 640px; 
 
     height: 441px; 
 
     display: table-cell; 
 
    \t vertical-align: middle; 
 
    \t text-align: center; 
 
    }

<div id="content" class="centered"> 
 
     <img src="https://www.google.com/images/srpr/logo11w.png" id="img-logo" alt="Google logo"> 
 
     <div>test</div> 
 
    </div>

Если вы хотите отцентрировать #content на странице, добавьте CSS : margin: 0 auto;

См. http://www.w3.org/Style/Examples/007/center.en.html

Answer 2

Если вы можете использовать CSS3, а затем использовать transform:translate

См fiddle

Answer 3

Это должно работать

#content { 
    margin-right: auto; 
    margin-left: auto; 
    position: relative; 
    top: 50%; 
    transform: translateY(+50%); 
}