Search code examples
javascriptcsscentering

Vertical Centering in a scrolled window

I'm trying to center vertically (or put at an arbitrary vertical position) an image in a window that has already been scrolled to the bottom.

For example, the user is on a page reading, clicking, etc. and is now, after multiple screens of content, at the bottom of the page and about to click the last button. I want an image to pop up centered in the window.

When I try: http://www.w3.org/Style/Examples/007/center-example

or: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

the image is centered on the first screen of content, i.e. you have to scroll the page all the way back up to see it centered in the window. I would like the image centered within their current point of scroll. This is intended to be part of a Javascript function.

Solution

  • A fixed position will do that (position:fixed in css). Here`s a jsfiddle in which a modal popup is centered that way on the screen.