Good daycentering elements are easy, when they have defined widths and heights: eg.width: 500px;height: 400px;Problem comes with Fluid Layouts:But I have a modal popup(lightbox) that I use to enlarge thumbnail images...:Problem is that I cannot get it to center, it floats left-top...I want it to be absolutely centered: vertical and horizontal Here is my modal popup codeAlso see my JSFIDDLE to see what i mean(try resizing the viewport)HTML:\[code\]<div id="imageModal"> <div id="close_button">X</div> <div id="imageHolder"></div></div>\[/code\]CSS:\[code\]#articleFeatured img{ width: 200px; height: 113px;}#imageModal { position: fixed; z-index: 1024; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgb(50, 50, 50); background: rgba(0, 0, 0, 0.6); vertical-align: middle;}#imageModal #imageHolder { display: table; vertical-align: middle; position: relative; margin: 0 auto; width: 100%; height: 100%; text-align: center; vertical-align: middle; border: 1px solid #0088cc;}#imageModal #imageHolder img { max-width: 100%; max-height: 100%; text-align: center; vertical-align: middle; display: table-cell;}#close_button { position: absolute; z-index: 9999; opacity:0.8; -ms-filter:"progid
XImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80); display: inline-block; max-width: 45px; max-height: 45px; width: 100%; height: 100%; float: left; top: 0; left: 0; padding: 10px; cursor: pointer;}\[/code\]
XImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80); display: inline-block; max-width: 45px; max-height: 45px; width: 100%; height: 100%; float: left; top: 0; left: 0; padding: 10px; cursor: pointer;}\[/code\]