CSS centered div isn't centered in Firefox

I did this all entirely within a day on little sleep (final school assignment for the semester ha) so maybe I'm missing something very obvious, but 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. Any help is appreciated! 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

Delphi ADO + MySQL + Developer Express Grid

mysql delphi devexpress ado

I have problems using Mysql with MySQL Connector, I can successfully connect to a database on the net via ODBC, and in my grid I can display many records, however in the grid (Developper express) I...

How to create virtual Environment for users on server

python linux apache deployment

I have a web application where users can register them self and then save Java and C++ programs in their account.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.