Center div in viewport with scrolling

Question

I am trying to center a header and footer in the viewport (like the game below). Content scrolls both vertically and horizontally but the header and footer should stay in the same place on the viewport. I've tried using following CSS:

.BottomMenu {
    background-color: #ADADAD;
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

But this produces a footer that is sticky vertically only. I need it to stay in that spot while the content moves in any direction.

Also, I'm pretty sure this question is a duplicate of http://stackoverflow.com/questions/3303173/position-element-fixed-vertically-absolute-horizontally — Kyle Martin, Feb 17 '17 at 01:36

oldboy · Accepted Answer · 2017-02-17T02:14:21.860

The issue, I believe, is your left and right values. The code below will do the trick.

body {
  width: 5000px;
  height: 5000px;
}

#element {
  width: 75px;
  height: 25px;
  position: fixed;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
  border: solid orange 2px;
}

<div id="element"></div>

The translate method adjusts the position of the element relative to itself. For instance, if you had an element with a width: 100px and set transform: translateX(-50%), it would move the element 50px to the left of wherever it is positioned.

top: 100%;
left: 50%;

Works like so...

 _________________
|                 |
|                 |
|                 |
|                 |
|                 |
|                 |
|                 |
|_________________|
         |___e___|

and

transform: translate(-50%, -100%)

works like so...

 _________________
|                 |
|                 |
|                 |
|                 |
|                 |
|                 |
|     _______     |
|____|___e___|____|

score 2 · Answer 2 · answered Feb 17 '17 at 01:57

This can be achieved by using a set width for the .BottomMenu class.

I have created a very basic JSFiddle that demonstrates using a fixed width, margins and positioning to keep the div centered.

#bottom-menu {
  position:fixed;
  bottom:0;
  left:50%;
  width:250px;
  margin-left:-125px;
  //optional
  padding: 10px;
  height:50px;
  line-height:50px;
}

Center div in viewport with scrolling

2 Answers2