Hello,

 

I come across a problem in firefox when I want vertically align div inside of a full browser width and height div. I used a table for parent and table-cell with vertical-align: middle for a child div method.

 

here is my code

 

CSS

.container {
    display:block;
	position:relative;
    min-width:100%;
    min-height:100%;
	display: table;
}
.intro-div { display: table-cell; vertical-align: middle; text-align:center; }
.fullscreen-img {
    display:block;position:absolute;z-index:-1;
    min-width:100%;
    min-height:100%;
    background:transparent url('../images/introslika.jpg') center center no-repeat;
    background-size:cover;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  	background-position: center center;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
}

HTML

 

<div class="container">

    <div class="fullscreen-img"></div>
    <div class="intro-div">
        <span class="introtxt">FRONT END / UI / UX</span><br><br>
        <span class="introtxtsmall">design & development</span><br><br><br><br>
        <span class="introtxttiny">Handcrafted web design made with love and with special care for user experience!</span><br><br><br>
<a href="#" class="btnintro btngreen flatbtn large">See my story</a>
    </div>
</div>

 

 

The point is to have a vertical and horizontal center in every browser and on every device.

I achived that on Chrome and IE to work flowless -

here is my SS

 

 

 

 

But firefox has a bug and does not want to show my code how i want to:

 

 

i found a post where that bug is explained but that case is not like mine and solution does not work.

 

http://wisercoder.com/firefox-displaytable-cell-and-absolute-positioning/

 

also i tried 6 ways to vertical align and only table method is giving me what i need, and i could not google anything that could help me.

 

Does any one have any solutions to this?

 

TY in advance

Edited May 27, 201412 yr by pacovix

anyone?

I use the same method frequently and it works fine for firefox. The only odd thing I notice in your code is you are declaring display block then display table. The display block should be moved. The only issue i get on FF is some images that are wider than the table break outside it. To fix set: table-layout:fixed for the table.

I recommend you open firebug and try to work out whats going wrong.

I removed display: block and the result is the same, also i tried with table-layout :fixed,

I cant find anything odd with firebug, dont know what to change.

 

TY for your answer

Do you have a live link for us to take a look at?

http://codepen.io/riogrande/full/imdFv/

 

Here you go mate, test it and it will work on IE and Chrome but not Firefox

Edited May 31, 201412 yr by pacovix

Try using height: 100% on your container, not just min-height.

Wynn i cant believe that fixed the problem, I thought it was going to be a difficult programming solution, and I could bet i experimented with height:100% .

 

If i give container a min-height of 100% why isnt that working, min-height will start from 100% and that is what i need?

 

In any case big thanks to @@Wynn and @rbrtsmith for your help

Edited June 1, 201412 yr by pacovix

set the width from min-width: 100% to width:100% too.

By default when using display table a height or width of 100% will act like a block level element with min-width 100% / min-height 100& I.e. if it's contents grow beyond it's bounds the table will still grow to accommodate - same as a block element will do if it has min-height. If you don't want this behaviour then add table-layout: fixed then it's width should keep within it's bounds.