I would like to make a position: fixed;
popup box centered to the screen with a dynamic width and height. I used margin: 5% auto;
for this. Without position: fixed;
it centers fine horizontally, but not vertically. After adding position: fixed;
, it's even not centering horizontally.
Here's the complete set:
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}
<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>
How do I center this box in screen with CSS?
Best Answer
You basically need to set
top
andleft
to50%
to center the left-top corner of the div. You also need to set themargin-top
andmargin-left
to the negative half of the div's height and width to shift the center towards the middle of the div.Thus, provided a
<!DOCTYPE html>
(standards mode), this should do:Or, if you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add
left: 0
andright: 0
to the element having amargin-left
andmargin-right
ofauto
, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.