Html 转换-转换未按预期工作

问题现已解决

我有一个自定义模式，看起来是这样的：

但是，正如您所看到的，它并没有在视口中居中

模态内容的包含父级有一个“模态”类

以下是我的CSS：

.modal {
    background: white;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 999;
    box-shadow: 5px 5px 20px black;
    border-radius: 5px;
    overflow: hidden;
}

我假设这将完美地将模态居中，因为满足以下标准：

模态代码在主体部分之外，但在结束主体标记之前

模态的位置固定为

顶部

和

左侧

的50%和

变换：translate（）

的-50%和-50%

但它并没有像预期的那样完美地将模态居中，我也不明白为什么。事实上，在chrome开发工具中，由于某些原因，它忽略了我的

transform:translate（）

语句，请参见此处：

在任何人询问之前，我确实尝试过使用

-webkit transform:translate（）

，但也没有成功

有什么想法吗

编辑：

如果有人问，我之所以要转换：scale（0）等等，是因为“is open”类将模态放大

.modal.is-open {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

主部分还得到了一个“模态打开”类，它只是添加了你可以看到的模糊

.modal-open {
    -webkit-filter: blur(5px) grayscale(50%);
    filter: blur(5px) grayscale(50%);
    z-index: 0;
    pointer-events: none;
}

编辑2:

我按照建议修改了CSS

transform

，将两个转换都包含在1中（以前从未这样做过，它通常与单独的语句一起工作，但我决定接受建议），但它不起作用，请参见此处：

您还可以在此处看到我的HTML标记，在其各自的元素上显示“is open”和“modal open”类：

如你所见，仍然存在问题，还有其他想法吗

编辑3:

这里是模态和问题的一个小片段

/*模态样式*/
.莫代尔{
背景：白色；
位置：固定；
最高：50%；
左：50%；
-webkit转换：比例（0）转换（-50%，-50%）；
变换：缩放（0）平移（-50%，-50%）；
不透明度：0；
指针事件：无；
z指数：999；
盒影：5px 5px 20px黑色；
边界半径：5px；
溢出：隐藏；
}
.模态.模态内部{
利润率：20px；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
}
.模态.模态内部.模态标题，
.模态.模态内部.模态体{
利润率：0.20px0；
}
.模态.模态内部.模态车身视频{
显示：块；
保证金：0自动；
最大宽度：100%；
}
.模态.模态内部.模态标题{
边框底部：1px纯色灰色；
}
.modal.modal内部.modal页脚{
边框顶部：1px纯色灰色；
填充：20px0；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒式包装：结束；
-webkit内容：flex-end；
-ms-flex-pack：结束；
证明内容：柔性端；
}
.modal.modal内部.modal页脚.modal关闭按钮{
背景：#190e8c；
填充：10px；
边界半径：10px；
颜色：白色；
文字装饰：无；
}
.modal.modal内部.modal页脚.modal关闭按钮：悬停{
盒影：嵌入2px 2px 2px黑色；
背景：海军；
}
.modal.is-open{
-webkit转换：规模（1）；
变换：比例（1）；
不透明度：1；
指针事件：自动；
}
.模态开放{
-webkit过滤器：模糊（5px）灰度（50%）；
滤镜：模糊（5px）灰度（50%）；
z指数：0；
指针事件：无；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。Donec pulvinar sem enim，eget fringilla nibh aliquam eget。这是一个很好的例子。这是一个很好的例子。毛里斯权杖不属于非智人sollicitudin
阿利奎特。佩伦茨克·艾默特·艾默特·艾默特·艾默特·艾默特·艾默特·艾默特·艾默特·艾默特·艾默特·艾默特·艾默特·艾默特·艾默特·艾默特·艾默特·艾。尊贵的贵族。菲尼布斯·拉奥里特·普雷蒂姆。佩伦茨克的奥古斯·米，一种新的葡萄品种，莫利斯的是一种turpis。埃尼安·莱克托斯·麦格纳，非朗库斯·奎斯的康莫，尊贵
维塔内克。多奈克·索利西丁·里苏斯·埃吉特·康瓦利斯·马蒂斯。苏打麦片。亨德雷特·尼斯勒·尼斯勒·尼斯勒·尼斯勒·尼斯勒·尼斯勒·尼斯勒·尼斯勒·朗卡斯·马克西姆斯。



杜伊斯nec发酵液sem，非莫利斯尼西。梅塞纳斯·内克·瓦里乌斯·普鲁斯。Donec hendrerit erat在《厄洛斯·尤伊斯莫·鲁特鲁姆》中。不知道，莫利斯和多尔维尔，智者大鼠。这是一个非常有趣的故事。无极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极极，
设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备用电设备。这是一个关于威尼斯人饮食的问题。Phasellus nec tellus libero。库拉比图尔·奥诺迪奥·维利特（Curabitur ornare odio velit）和莫利斯·索利西图丁（cursus imperdiet quam mollis sollicitudin）。
乌拉姆科珀酒店。这是一个很好的例子。Integer pharetra sodales eros。



Nam pharetra blandit ante。这是我的赌注。在一个港口，我们是拉奥里特·埃宁。多涅克·乌兰科佩尔（Donec ullamcorper）、阿尔库·伊库利斯·马莱苏亚达（arcu ut iaculis malesuada）、乌兰科佩尔·乌兰科佩尔（urna sapien bibendum sapien）、奥迪奥·维勒·奥奇（odio vel orci）二人世界。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。
梅塞纳斯·洛雷姆·厄洛斯，非精英间的塞特·阿梅特，法雷特拉·拉奥里特·埃尼姆。同侧前额，同侧前额，同侧前额，同侧前额。不要让我的头发变白，不要让我的头发变白，不要让我的头发变白。这是一种致命的创伤。



无便利。在尤伊斯莫·奥奇，我是波苏尔·埃尼姆。这是一个通信器。非暂时性三叉戟。请按自己的意愿行事。多奈克·阿利奎特·朗库斯·康塞特图。这是一种新的元素。奎斯克
拍卖人magna和augue feugiat Temporal non quis erat。库拉比图尔·康塞克特（Curabitur Consequeat accumsan lectus faucibus Dignessim）。莫里斯·萨吉蒂斯·亨德雷特·维利特（Mauris sagittis hendrerit velit）在威尼斯纳蒂斯。阿利夸葡萄（Aliquam varius mauris eu egestas dictum）。我是波苏尔先生，他是一个很小的女孩。脯氨酸
阿利奎特·奥古斯。



佩伦茨克汽车公司。不要因为怀孕而改变枕叶。多尼克监狱
.modal.is-open {
    transform: translate(-50%, -50%) scale(1);
}

.modal {
  -webkit-transform: scale(0) translate(-50%, -50%);
  transform: scale(0) translate(-50%, -50%);
}

.modal.is-open {
   -webkit-transform: scale(1) translate(50%, 50%);
}