我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金: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的中心元素
位置:固定
Html和Css代码
.jqbox_innerhtml { 位置:固定; 宽度:100%; 高度:100%; 显示:flex; justify-content:空间; 对齐项目:中心; 左:0; 上图:0; 宽度:100%; 高度:100%; 边框:5px实体#ccc; background - color: # fff; ｝ < div class = " jqbox_innerhtml”> 这应该在一个水平的 垂直居中的盒子。 < / div >
其他回答
这个解决方案不需要你为弹出式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 {
position: fixed;
left: 68%;
transform: translateX(-8%);
}
这个方法对我来说效果最好:
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
中心定位元件 (这是我所知道的最简单最好的方法)
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中使用边缘时，在居中元素内部
