我想做一个职位:固定;弹出框居中与屏幕的动态宽度和高度。我使用保证金:5% auto;对于这个。无位置:固定的;它的水平中心很好,但不是垂直中心。添加position: fixed;后,水平方向甚至没有居中。

以下是完整的一套:

.jqbox_innerhtml { 位置:固定; 宽度:500 px; 身高:200 px; 利润率:5%汽车; 填充:10 px; 边框:5px实体#ccc; background - color: # fff; } < div class = " jqbox_innerhtml”> 这应该在一个水平的 垂直居中的盒子。 < / div >

我如何中心这个框在屏幕与CSS?


当前回答

我就用这样的方法:

.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)。

其他回答

#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

在它里面可以是任何有差异宽度,高度或没有的元素。 全部居中。

要确定位置,请使用以下命令:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}

添加:

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)。

添加一个这样的容器:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

然后把你的盒子放入这个div将做的工作。

编辑:正如评论中提到的,内部内容需要设置为display: inline-block,假设有两个div,比如:

    <div class="outer">
        <div class="inner">
             content goes here
        </div>
    </div>

然后内部的CSS需要是:

    .outer {
        position: fixed;
        text-align: center;
        left: 0;
        right: 0;
    }
    .inner {
        display: inline-block;
    }

加上外部div的left: 0;右:0;text-align: center这将使内部div居中对齐,而不显式地指定内部div的宽度。