How to center an element in the middle of the browser window?

by

To do this you need to know the size of the element you are centering. Any measurement will do (i.e. px, em, percent), but it has to have a fixed size.

The css will look as follows:

 // Replace X and Y with a number and u with a unit. do calculations
 // and remove parens
.centered_div {
   width: Xu;
   height: Yu;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -(X/2)u;
   margin-top: -(Y/2)u;
}

Edit: This centers in the viewport. You can only center in the browser window using JavaScript. But that might be good enough anyway, since you probably want to display a popup/modal box?

More Related Contents:

  1. Trouble with image
  2. Which way to implement this picture in HTML CSS code and bootstrap
  3. Can I have an onclick effect in CSS?
  4. Why aren’t my absolutely/fixed-positioned elements located where I expect?
  5. float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
  6. How to remove the arrow from a select element in Firefox
  7. Colspan/Rowspan for elements whose display is set to table-cell
  8. Change cursor type on input type=”file” [duplicate]
  9. How do I install a custom font on an HTML site
  10. Visible Area tag?
  11. How to create a curve between two gradient using CSS?
  12. Line break (like ) using only css
  13. How to create a transparent triangle with border using CSS?
  14. Turn off Chrome/Safari spell checking by HTML/css [duplicate]
  15. How to get a background image to print using css?
  16. How to set an image’s width and height without stretching it?
  17. Make flex items overlap
  18. HTML class attribute with spaces, it is a W3C valid class?
  19. Aligning elements left and center with flexbox
  20. How to set placeholder value using CSS?
  21. Changing the highlight color when selecting text in an HTML text input
  22. How to run the CSS3 animation to the end if the selector is not matching anymore?
  23. How to add button inside an input [closed]
  24. Unwanted border-radius corners around images in Brave/Chrome browser
  25. Progress Bar with HTML and CSS
  26. scrollable?
  27. Why aren’t my bootstrap 4 columns the same height?
  28. How do I horizontally center an absolute positioned element inside a 100% width div? [duplicate]
  29. download webpage and dependencies, including css images [closed]
  30. Can you have a within a ?

Leave a Comment