CSS centered div isn't centered in Firefox

My centered div box, that has an image in it and is centered with CSS, appears really off on Firefox! Somehow it's been offset down, if that makes sense?

It looks fine in both Safari and Chrome, and I'd really like to be able to get it right in FF as well. Here is my CSS bit:

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>

Answers


I used this code in firefox, and it worked perfectly (even in chrome):

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

The way you have the layout set up is kind of a hack so I had to end up correcting most of style2.css on your site. You can use css display:flex, flex-flow: row; and justify-content to achieve the same layout without custom positioning on every element. This fixes the centering issue you were having.

/* 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%; 
}

Need Your Help

using GDAL/OGR api to read vector data (shapefile)--How?

c++ linux opengl gdal

I am working on an application that involves some gis stuff. There would be some .shp files to be read and plotted onto an opengl screen. The current opengl screen is using the orthographic projec...