-2

I have a website, and I need to have an image centered at the bottom of the visible page. So in any screen size, the image will still be at the bottom, and centered. I've tried other Stack Overflow threads and can't seem to find something that will actually keep it at the bottom.

position:fixed;
bottom:0px;
left:50%;

This does not work.

nozzy
  • 33
  • 1
  • 10
Mitchell
  • 47
  • 1
  • 4

1 Answers1

0

It looks like you probably do want a fixed position so that when you scroll the div will scroll down with you, but you might need to add more information about the div you are trying to center. Am I correct in assuming the div is following as you scroll but not centered correctly?

If that's the case, my guess is because your margins are not taking into account the height and width of the div you are trying to put in the middle of the screen. If you have an object that has a width of 100px, you need to subtract half of that from the margin-left so that the div is actually hitting the center of the screen. More context would be helpful, but hopefully this gives you something to work with.

In this example, your div would look something like this:

.center-bottom {
  position:fixed;
  bottom:0px;
  left:50%;
  width: 100px;
  margin-left: -50px;
}
iamjane
  • 162
  • 8