Center a position:fixed element

2019-01-02 16:33发布

站内问答 / HTML/CSS
1082 12 4

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?

12条回答
梦寄多情
2楼-- · 2019-01-02 17:07

You can basically wrap it into another div and set its position to fixed.

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}
<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>

查看更多
0人赞 添加讨论(0) 举报
还给你的自由
3楼-- · 2019-01-02 17:08

Or just add left: 0 and right: 0 to your original CSS, which makes it behave similarly to a regular non-fixed element and the usual auto-margin technique works:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

Note you need to use a valid (X)HTML DOCTYPE for it to behave correctly in IE (which you should of course have anyway..!)

查看更多
0人赞 添加讨论(0) 举报
刘海飞了
4楼-- · 2019-01-02 17:10 
left: 0;
right: 0;

Was not working under IE7.

Changed to 

left:auto;
right:auto;

Started working but in the rest browsers it stop working! So used this way for IE7 below

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
查看更多
0人赞 添加讨论(0) 举报
大哥的爱人
5楼-- · 2019-01-02 17:13

Try using this for horizontal elements that won't center correctly.

width: calc (width: 100% - width whatever else is off centering it)

For example if your side navigation bar is 200px:

width: calc(100% - 200px);
查看更多
0人赞 添加讨论(0) 举报
步步皆殇っ
6楼-- · 2019-01-02 17:14

The only foolproof solution is to use table align=center as in:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

I cannot believe people all over the world wasting these copious amount to silly time to solve such a fundamental problem as centering a div. css solution does not work for all browsers, jquery solution is a software computational solution and is not an option for other reasons.

I have wasted too much time repeatedly to avoid using table, but experience tell me to stop fighting it. Use table for centering div. Works all the time in all browsers! Never worry any more.

查看更多
0人赞 添加讨论(0) 举报
君临天下
7楼-- · 2019-01-02 17:16

You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-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:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Or, if you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0 and right: 0 to the element having a margin-left and margin-right of auto, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)