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

Written by robert godard
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How Do I Get My Lightbox Popup to Center on the Screen?
Use Lightbox to create an interactive gallery for your website (Comstock Images/Comstock/Getty Images)

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 centre of the screen. If this is not working, there is a way to force this centre positioning using CSS code.

Skill level:
Moderately Easy

Other People Are Reading

Things you need

  • Text Editor
  • Lightbox

Show MoreHide


  1. 1

    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.

  2. 2

    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.

  3. 3

    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 centre. If you would like to move your lightbox around, enter positive or negative values in the "top" and "left" fields.

  4. 4

    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 centre of the screen anywhere on your site.

Tips and warnings

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

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.