我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金: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;
}
其他回答
唯一可靠的解决方案是使用表align=center，如下所示:
<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>
我无法相信世界各地的人们浪费这么多愚蠢的时间来解决这样一个基本的问题，如集中一个div. css解决方案并不适用于所有浏览器，jquery解决方案是一个软件计算解决方案，并不是一个其他原因的选择。
我已经浪费了太多的时间来避免使用桌子，但经验告诉我不要再这样做了。使用表格为div居中。在所有浏览器中都有效!再也不用担心了。
我使用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;
#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);
