Skip to main content
Known Participant
April 2, 2014
Question

How to align a div to the bottom center?

  • April 2, 2014
  • 2 replies
  • 36805 views

Anyone can help?
Should I use relative or absolute for position?

This topic has been closed for replies.

2 replies

August 14, 2014

Div align on bottom center

#outer{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

}

#inner{

width: 50%;

height: 50%;

top:50%;

margin: 0 auto;

position: relative;

background:orange;

}

Full source :...http://www.corelangs.com/css/box/divindiv.html

Helsy

Jon Fritz
Community Expert
Community Expert
April 2, 2014

What is the ultimate goal here?

If you want to have an element hold to the bottom of the screen no matter what and sit on top of any other content, you would use position:fixed...

#bottom_nav {

     width:100%;

     position:fixed;

     bottom:0px;

     text-align:center;

     z-index:9999;

}

Then in your html...

<div id="bottom_nav">Home | About | Contact | Portfolio</div>

Nancy OShea
Community Expert
Community Expert
April 2, 2014

But position:fixed won't center.  Neither will position:absolute.

Nancy O.

Nancy O'Shea— Product User & Community Expert
Jon Fritz
Community Expert
Community Expert
April 3, 2014

Thank you very much Jon! That vh units really helpful! Just 1 more question, there is a gap between the bottom div and the browser window, if the browser window size is larger, that gap is getting larger as well, how to remove that gap?


hinc94 wrote:

Thank you very much Jon! That vh units really helpful! Just 1 more question, there is a gap between the bottom div and the browser window, if the browser window size is larger, that gap is getting larger as well, how to remove that gap?

There shouldn't be a gap below the bottom gray bar, no matter what your viewport size is.

What browser and version are you using?

If you are using a modern browser, Is the gap you see the bottom scrollbar?