Tanjima Tani Tanjima Tani - 6 months ago 21
HTML Question

Keeping div always at the middle bottom of the screen with css

I am trying to keep a div at the bottom of the screen always. And as the div width is smaller than the screen so it should be at the middle of the screen. The First thing is working but it if floating left always.

The code is

<div id="catfish" style="position:fixed; bottom:0; z-index:5000; width: 468px; margin: 0px auto;">
<div style="position:absolute; margin-bottom:0px; z-index:15;">
<a href="Javascript:void(0);" onclick="document.getElementById('catfish').style.display='none'"><img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img></a>
</div>
<div>
Some elemnt here
</div>
</div>


jsfiddle example
Please help me.

Answer

You have to add left and right to your div with value 0. If you also want the your text in the middle you have to add text-align: center;

  <div id="catfish" style="position:fixed; bottom:0; left:0; right:0; text-align:center;  z-index:5000; width: 468px; margin: 0px auto;">
        <div style="position:absolute;  margin-bottom:0px; z-index:15;">
            <a href="Javascript:void(0);" onclick="document.getElementById('catfish').style.display='none'"><img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img></a>
        </div>
        <div>
           Some elemnt here
    </div
    </div>

Hope that helps!