我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金:5% auto;对于这个。无位置:固定的;它的水平中心很好,但不是垂直中心。添加position: fixed;后,水平方向甚至没有居中。

以下是完整的一套:

.jqbox_innerhtml { 位置:固定; 宽度:500 px; 身高:200 px; 利润率:5%汽车; 填充:10 px; 边框:5px实体#ccc; background - color: # fff; } < div class = " jqbox_innerhtml”> 这应该在一个水平的 垂直居中的盒子。 < / div >

我如何中心这个框在屏幕与CSS?


当前回答

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'});
}

其他回答

这个解决方案不需要你为弹出式div定义宽度和高度。

http://jsfiddle.net/4Ly4B/33/

而不是计算弹出窗口的大小,减去一半到顶部,javascript正在调整popupContainer的大小以填充整个屏幕…

(100%高度,使用display:table-cell时不起作用;(需要将某物垂直居中))…

不管怎样,它是有效的:)

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'});
}

添加一个这样的容器:

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

然后把你的盒子放入这个div将做的工作。

编辑:正如评论中提到的,内部内容需要设置为display: inline-block,假设有两个div,比如:

    <div class="outer">
        <div class="inner">
             content goes here
        </div>
    </div>

然后内部的CSS需要是:

    .outer {
        position: fixed;
        text-align: center;
        left: 0;
        right: 0;
    }
    .inner {
        display: inline-block;
    }

加上外部div的left: 0;右:0;text-align: center这将使内部div居中对齐,而不显式地指定内部div的宽度。

属性为的div的中心元素

位置:固定

Html和Css代码

.jqbox_innerhtml { 位置:固定; 宽度:100%; 高度:100%; 显示:flex; justify-content:空间; 对齐项目:中心; 左:0; 上图:0; 宽度:100%; 高度:100%; 边框:5px实体#ccc; background - color: # fff; } < div class = " jqbox_innerhtml”> 这应该在一个水平的 垂直居中的盒子。 < / div >

中心定位元件 (这是我所知道的最简单最好的方法)

position:fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%));

用于水平和垂直居中(如果高度与宽度相同)

position:fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));

这两种方法都不会限制居中元素的宽度小于视口宽度,当在flexbox中使用边缘时,在居中元素内部