Question

我有一个模态弹出窗口，我的宽高比为16：9。

我希望将蓝色弹出窗口垂直居中，并始终保持宽高比。

<div class="modal">
    <div class="parent">
        <div class="child">
            <div>Aspect is kept when resizing</div>
        </div>
    </div>
</div>

CSS

.modal {
  width: 100%;
  height: 100%;
  background: #333;
  opacity: 0.85;
  position: absolute;
  left: 0;
  top: 0;
}
.parent {
    position: relative;
    width: 80%;
    margin-left: 10%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    border-radius: 5px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: blue;
    color: white;
    font-size: 24px;
    text-align: center;
}

这是我所拥有的演示。 DEMO

Answer 1

.parent {
    position: absolute;           /* instead of relative */
    top:50%;                      /* push to 50% top */
    transform: translateY(-50%);  /* bring back at -50% own height */

＆＃13;

.parent {
  position: absolute;           /* instead of relative */
  top:50%;                      /* push to 50% top */
  transform: translateY(-50%);  /* bring back at -50% own height */
  width: 80%;
  margin-left: 10%;
}
.child {
  position: relative;
  padding-bottom: calc(100% * 9 / 16);
}
.child > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: blue;
  color: white;
  font-size: 24px;
  text-align: center;
}

＆＃13;

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

＆＃13;

Answer 2

这是一个div解决方案。我不喜欢使用变换来获得垂直中心，因为你可以在奇数高度值处获得模糊文本。

https://jsfiddle.net/nqL10ezp/2/

.modal {
    position: absolute;
    height: 0px;
    width: 80%;
    padding-bottom: calc(100% * 9 / 16);
    background-color: #F00;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

垂直中心模态，方位16：9

2 个答案: