我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金:5% auto;对于这个。无位置:固定的;它的水平中心很好，但不是垂直中心。添加position: fixed;后，水平方向甚至没有居中。
以下是完整的一套:
.jqbox_innerhtml { 位置:固定; 宽度:500 px; 身高:200 px; 利润率:5%汽车; 填充:10 px; 边框:5px实体#ccc; background - color: # fff; ｝ < div class = " jqbox_innerhtml”> 这应该在一个水平的 垂直居中的盒子。 < / div >
我如何中心这个框在屏幕与CSS?
当前回答
很简单，试试这个
position: fixed;
width: 500px;
height: 300px;
top: calc(50% - 150px);
left: calc(50% - 250px);
background-color: red;
其他回答
要确定位置，请使用以下命令:
div {
position: fixed;
left: 68%;
transform: translateX(-8%);
}
这个解决方案不需要你为弹出式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'});
}
我使用vw(视口宽度)和vh(视口高度)。Viewport是你的整个屏幕。100vw是屏幕的总宽度，100vh是屏幕的总高度。
.class_name{
width: 50vw;
height: 50vh;
border: 1px solid red;
position: fixed;
left: 25vw;top: 25vh;
}
很简单，试试这个
position: fixed;
width: 500px;
height: 300px;
top: calc(50% - 150px);
left: calc(50% - 250px);
background-color: red;
