我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金: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中，并将其位置设置为fixed。
.bg { 位置:固定; 宽度:100%; ｝ .jqbox_innerhtml { 宽度:500 px; 身高:200 px; 利润率:5%汽车; 填充:10 px; 边框:5px实体#ccc; background - color: # fff; ｝ < div class = " bg”> < div class = " jqbox_innerhtml”> 这应该在一个水平和垂直居中的盒子里。 < / div > < / div >
其他回答
添加:
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
我就用这样的方法:
.c-dialogbox {
--width: 56rem;
--height: 32rem;
position: fixed;
width: var(--width);
height: var(--height);
left: calc( ( 100% - var(--width) ) / 2 );
right: calc( ( 100% - var(--width) ) / 2 );
top: calc( ( 100% - var(--height) ) / 2 );
bottom: calc( ( 100% - var(--height) ) / 2 );
}
它为我设置了水平和垂直的对话框中心，我可以使用不同的宽度和高度来适应不同的屏幕分辨率，以使其具有媒体查询的响应性。
如果您仍然需要为不支持CSS自定义属性或calc()的浏览器提供支持，则不可取(请检查caniuse)。
试着用这个方法来处理水平元素的居中不正确。
Width: calc (Width: 100% -其他任何偏离中心的宽度)
例如，如果你的侧导航栏是200px:
width: calc(100% - 200px);
你基本上可以将它包装到另一个div中，并将其位置设置为fixed。
.bg { 位置:固定; 宽度:100%; ｝ .jqbox_innerhtml { 宽度:500 px; 身高:200 px; 利润率:5%汽车; 填充:10 px; 边框:5px实体#ccc; background - color: # fff; ｝ < div class = " bg”> < div class = " jqbox_innerhtml”> 这应该在一个水平和垂直居中的盒子里。 < / div > < / div >
当你不知道你正在居中的东西的大小，而你想让它在所有屏幕尺寸中居中时，这个方法非常有效:
.modal {
position: fixed;
width: 90%;
height: 90%;
top: 5%; /* (100 - height) / 2 */
left: 5%; /* (100 - width) / 2 */
}
