Question

我尝试为诸如论坛之类的功能创建功能。人们可以使用自定义的BBcode生成图像的缩略图，然后单击我会看到图像模态，其中图像的最大高度和最大宽度用于动态尺寸。

我的图像模态有问题。我无法将结果正确地居中显示在屏幕上。像这样进行格式化时，图像会水平居中，但垂直粘贴在顶部。我该怎么办？

HTML：

<div class="wrapperDiv">
    <img class="fullimage" src="$someUrl">
</div>

CSS：

.wrapperDiv {
    position: fixed;
    display: block;

    height: 100%;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);  

    z-index: 10000;
}

 .fullimage {
    height: 100%;

    max-height: 500px;
    max-width: 500px;
}

Answer 1

您应该尝试像这样弯曲自己：

.wrapperDiv {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.fullimage {
  height: 100%;
  max-height: 500px;
  max-width: 500px;
}

https://codepen.io/GuillaumeGautier/pen/rNxxKJZ

居中显示具有最大高度和最大宽度的图像

1 个答案: