html - 在移动设备上垂直居中元素

Question

我在移动设备上将元素居中时遇到问题，当高度降低时，顶部内容被隐藏但在桌面上是好的。请参阅下面的链接以查看屏幕截图中的问题

Desktop version

Mobile version

HTML

<div class="modal">
  <div class="modal-section">
    <div class="modal-area">
      <div class="header">
        Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, 
        consectetur 
      </div>
      <div class="items">
        <div class="element">
          <div class="img">
            <img src="https://via.placeholder.com/150" alt="">
          </div>
          <div class="desc">
        Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, 
        consectetur 
          </div>
        </div>
        <div class="element">
          <div class="img">
            <img src="https://via.placeholder.com/150" alt="">
          </div>
          <div class="desc">
        Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, 
        consectetur 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.modal {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: oldlace;
  color: #2F2F2F;
  z-index: 99999;
  overflow: auto;
}
.items {
  display: flex;  
  margin: 20px 0;
  justify-content: center;
}
.element {
  overflow: hidden;
  background: #2F2F2F;
  color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  margin: 20px;
  cursor: pointer;
  width: 150px;
}
.img {
    height: 150px;
}

示例代码

https://jsfiddle.net/twzud65n/3/

Answer 1

似乎您有一些元素没有完全做某事并且没有应用适合的样式。modal-section 的假设是什么？

因为您的模态框上有 position: fixed，所以您需要告诉它的 child 不要溢出他们的 parent 。 width: 100% 就是这样做的，height: auto 意味着它可以根据需要缩放到允许滚动的程度。

试试这个:

.modal-section {
    width: 100%;
    height: auto;
}