固定元素到中心位置?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (10)
  • 关注 (0)
  • 查看 (90)

我想做一个中心到屏幕的动态宽度和高度为position: fixed;的弹出框。我用margin: 5% auto;为了这个。无position: fixed;它的中心水平很好,但不是垂直的。加后position: fixed;,甚至不是水平中心。

.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>

用CSS怎么将这个box放到屏幕的中央??

提问于
用户回答回答于

你基本上需要设置topleft50%在div的左上角居中。您还需要设置margin-topmargin-left将中心移到div高度和宽度的负一半,使中心移向div的中间。

因此提供了<!DOCTYPE html>(标准模式):

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

或者,如果您不关心对垂直和旧的浏览器(如IE6/7)进行居中,那么您可以添加left: 0right: 0元素的margin-leftmargin-rightauto,以便具有固定宽度的固定位置元素知道其左、右偏移的起始位置

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

同样,这只适用于IE8以上的版本

用户回答回答于

试着将其用于不能正确居中的元素。

宽度:calc(宽度:100%-宽度)

例如,如果侧导航栏为200 px:

width: calc(100% - 200px);
用户回答回答于

参考:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>
用户回答回答于
left: 0;
right: 0;

在IE7下不能正常。

改为

left:auto;
right:auto;

在其他浏览器中,它会停止工作!所以在IE7中使用了下面的这种方法

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
用户回答回答于

计算弹出窗口的大小和顶部减去一半,javascript是调整弹出容器的大小来填充整个屏幕...

(100%高度,使用显示时不工作:表单元格;(需要垂直对齐))...

用户回答回答于

只需添加:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
用户回答回答于

对于新浏览器,它的工作方式是

 left: 0;
 right: 0;
 top: (you can place any value, its work);
 margin: 0 auto;
用户回答回答于

添加一个容器,如:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

然后把你的盒子放到这个div里就可以完成工作了。

用户回答回答于

只添加left:0和right:0到你原来的CSS:

.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;
}

注意,您需要使用正确的(X)HTMLDOCTYPE。

用户回答回答于

我想使一个弹出框中心到屏幕的宽度和高度是动态的。

用于水平地对具有动态宽度的元素进行中心化-,它在所有浏览器种都适用

示例

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

对于垂直和水平对中,您可以使用以下方法:

示例

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

扫码关注云+社区

领取腾讯云代金券