我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金: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时不起作用;(需要将某物垂直居中))…

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

其他回答

或者只是在原始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中正确运行(当然,无论如何您都应该有..!)

当你不知道你正在居中的东西的大小,而你想让它在所有屏幕尺寸中居中时,这个方法非常有效:

.modal {
  position: fixed;
  width: 90%;
  height: 90%;
  top: 5%;           /* (100 - height) / 2 */
  left: 5%;          /* (100 - width) / 2 */
}

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

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中使用边缘时,在居中元素内部

#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

在它里面可以是任何有差异宽度,高度或没有的元素。 全部居中。

试着用这个方法来处理水平元素的居中不正确。

Width: calc (Width: 100% -其他任何偏离中心的宽度)

例如,如果你的侧导航栏是200px:

width: calc(100% - 200px);