How Do I Get My Lightbox Popup to Center on the Screen?


A lightbox is JavaScript code that can be used to display an image in a pop-up box rather then a new window altogether. The code is written so that many of its features can be edited, including caption, size and position. By default, lightbox should pop up in the center of the screen. If this is not working, there is a way to force this center positioning using CSS code.

Things You'll Need

  • Text Editor
  • Lightbox
  • Download Lightbox from the Lightbox website. This download will include the JavaScript files you need to run Lightbox, as well as the CSS code that can be used to change its appearance.

  • Open your text editor, such as Notepad or Text Edit. Select "File" from the top menu, then select "Open." Navigate to the folder you downloaded Lightbox to, then click "lightbox.css" to open this file. This will open your CSS stylesheet.

  • Find the section thath begins "#lightbox." This controls the appearance of the box which pops up on the screen. After the "{" add the code:




    Make sure to close this out with "}". This will give your lightbox a fixed position no matter which browser it is on. The "top" and "left" designations mean it will not move from the center. If you would like to move your lightbox around, enter positive or negative values in the "top" and "left" fields.

  • Save your file by clicking "File" then "Save." Upload all of the files to your web server and you will be able to use Lightbox with a popup fixed at the center of the screen anywhere on your site.

Tips & Warnings

  • You can also define other parameters for your lightbox in your CSS stylesheet, such as the color of your box.

Related Searches


  • Photo Credit Comstock Images/Comstock/Getty Images
Promoted By Zergnet


You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!