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

以下是完整的一套:

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

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


当前回答

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

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

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

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

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

其他回答

添加:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;

属性为的div的中心元素

位置:固定

Html和Css代码

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

或者只是在原始CSS中添加left: 0和right: 0,这使得它的行为类似于常规的非固定元素,并且通常的自动边距技术也起作用:

.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)HTML DOCTYPE,以使其在IE中正确运行(当然,无论如何您都应该有..!)

我用的方法很简单。例如,我有一个定位:固定的导航条,所以我调整它,在边缘留下一个小空间,像这样。

nav {
right: 1%;
width: 98%;
position: fixed;
margin: auto;
padding: 0;
}

其思想是取宽度的剩余百分比(在本例中为2%)并使用它的一半。

很简单,试试这个

position: fixed;
width: 500px;
height: 300px;
top: calc(50% - 150px);
left: calc(50% - 250px);
background-color: red;