我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金:5% auto;对于这个。无位置:固定的;它的水平中心很好，但不是垂直中心。添加position: fixed;后，水平方向甚至没有居中。
以下是完整的一套:
.jqbox_innerhtml { 位置:固定; 宽度:500 px; 身高:200 px; 利润率:5%汽车; 填充:10 px; 边框:5px实体#ccc; background - color: # fff; ｝ < div class = " jqbox_innerhtml”> 这应该在一个水平的 垂直居中的盒子。 < / div >
我如何中心这个框在屏幕与CSS?
当前回答
我使用vw(视口宽度)和vh(视口高度)。Viewport是你的整个屏幕。100vw是屏幕的总宽度，100vh是屏幕的总高度。
.class_name{
width: 50vw;
height: 50vh;
border: 1px solid red;
position: fixed;
left: 25vw;top: 25vh;
}
其他回答
试着用这个方法来处理水平元素的居中不正确。
Width: calc (Width: 100% -其他任何偏离中心的宽度)
例如，如果你的侧导航栏是200px:
width: calc(100% - 200px);
这个解决方案不需要你为弹出式div定义宽度和高度。
http://jsfiddle.net/4Ly4B/33/
而不是计算弹出窗口的大小，减去一半到顶部，javascript正在调整popupContainer的大小以填充整个屏幕…
(100%高度，使用display:table-cell时不起作用;(需要将某物垂直居中))…
不管怎样，它是有效的:)
遇到这个问题，所以我得出结论，使用(隐形的)容器是最好的选择(基于@Romulus Urakagi Ts’ai的回答)。用flexbox制作:
.zoom-alert {
position: fixed;
justify-content: center;
display: flex;
bottom: 24px;
right: 0;
left: 0;
z-index: 100000;
width: 100%;
&__alert {
flex: 0 0 500px;
padding: 24px;
background-color: rgba(212, 193, 105, 0.9);
border: 1px solid rgb(80, 87, 23);
border-radius: 10px;
}
}
(语法是SCSS，但可以很容易地修改为纯CSS)
中心定位元件 (这是我所知道的最简单最好的方法)
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中使用边缘时，在居中元素内部
很简单，试试这个
position: fixed;
width: 500px;
height: 300px;
top: calc(50% - 150px);
left: calc(50% - 250px);
background-color: red;
