CODEWITHSUNDEEP
htmlcsssticky
Timothy Bomer
Timothy Bomer

Reputation: 510

Center div in viewport with scrolling

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.

Example 1

Upvotes: 2

Views: 2868

Answers (2)

oldboy
oldboy

Reputation: 5964

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___|____|

Upvotes: 3

Nico
Nico

Reputation: 12683

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;
}

Upvotes: 2

Related Questions