CSS-центрированный div не сосредоточен в Firefox

Question

Мой центрированный квадрат div, который имеет изображение в нем и центрирован с помощью CSS, действительно выглядит на Firefox! Как-то это было компенсировано, если это имеет смысл?

Он отлично выглядит как в Safari, так и в Chrome, и мне бы очень хотелось, чтобы это было правильно в FF. Вот мой CSS бит:

body { 
 
    color: #000; 
 
    font-size: 12px; 
 
    line-height: 14px; 
 
    font-family: Arial; 
 
    font-weight: ; 
 
    text-align: left; 
 
    margin: 5% 0px 0px 0px; 
 
    padding: 0px 0px 0px 0px; 
 
} 
 
div#mainimg { 
 
    position: fixed; 
 
    bottom: 50%; 
 
    left: 0px; 
 
    width: 100%; 
 
    padding: 0px; 
 
    z-index: 2; 
 
} 
 
.centeredmainimg { 
 
    position: absolute; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
}

<div id="mainimg"> 
 
    <img class="centeredmainimg" src="http://carriejade.com/images/name.png" /> 
 
</div>

Моя точка была иметь все (мое имя изображения + пурпурной линии), чтобы быть в центре вне зависимости от разрешения экрана (и браузера, но увы).

Answer 1

Я использовал этот код в Firefox, и она работала отлично (даже в хроме):

position: fixed; 
margin: auto; 
left: 0px; 
right: 0px; 
top: 0px; 
bottom: 0px; 

Answer 2

Путь вы макет настроить это своего рода хак, так что я должен был закончить исправляя большинство style2.css на вашем сайте. Вы можете использовать css display:flex, flex-flow: row; и justify-content для достижения такой же компоновки без индивидуального позиционирования на каждом элементе. Это устраняет проблему центрирования, с которой вы столкнулись.

/* CSS Document */ 
html, body { 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
} 
body { 
    display: flex; 
    flex-flow: column; 
    justify-content: space-between; 
    font-size: 0; 
} 
body * { 
    font-size: 12pt; 
    line-height: 14pt; 
    font-family: Arial; 
    color: #000; 
} 
div#topdiv { 
    height:40px; 
    line-height:40px; 
    font-family: "Courier New", Courier, monospace; 
    font-size: 24px; 
    background:#fff45f; 
    text-align:center; 
    z-index: 2; 
} 
div#bottomdiv { 
    height:30px; 
    font-family: 'Oswald', "Courier New", Courier, monospace; 
    font-size: 20px; 
    line-height: 30px; 
    background:#ec008c; 
    text-align:justify; 
    z-index: 2;  
} 
div#middlediv { 
    line-height:10px; 
    background:#ec008c; 
} 
div#mainimg { 
    position:absolute; 
    bottom:30px; 
    top: 40px; 
    left:0px; 
    right: 0px;  
    z-index: 2; 
} 
.centeredmainimg { 
    height: 100%; 
    width: 100%; 
}