Different result of fixed element CSS in Chrome and Firefox

Question

I have this html:

<div class="lightbox">          
    <div class="lightbox-content-wrapper">
        <div class="lightbox-content-inner-wrapper">                    
            <div class="lightbox-content">
                <!-- Popup Form -->
                <div class="lightbox-form-wrapper">
                    Test
                </div>
            </div>
        </div>             
    </div>
</div>

and this CSS:

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  background: rgba( 0, 0, 0, .7 ) repeat;
}

.lightbox-content-wrapper {
  background-color: #FFF;
  width: 20%;
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: table;
  text-align: center;
  border: 10px solid #2980B9;
}

This is the fiddle: http://jsfiddle.net/p2omaw29/1/.

I want to create a lightbox that is put in the center of the screen. If you open the fiddle in Chrome and Firefox, you can see that it gives different result. In Chrome the box is put right at the center of the screen while in Firefox it's put on the top as if the bottom: 0; rule doesn't work.

So actually what makes the results different? I have been tweaking some CSS for one hour with no result.

Thank you in advance!

Answer 1

Setting the bottom and the top to zero gives the element in a way a height of 100%. It starts at the very top and ends at the very end. That the results differ in the browsers is due to different implementations of the display table property. If you set it to table-cell you are able to see what actually happens in both browsers.

Here is how you could achieve the element to be in center of the screen.

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    background: rgba( 0, 0, 0, .7 ) repeat;
}

.lightbox-content-wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background-color: #FFF;
    width: 20%;
    text-align: center;
    border: 10px solid #2980B9;
}

http://jsfiddle.net/09euw1by/

Note that it does not work in Internet Explorer 8 and below and that you need to prefix it for Internet Explorer 9.

http://www.w3schools.com/cssref/css3_pr_transform.asp