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

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，你需要告诉它的孩子不要溢出他们的父母。 width: 100% 这样做，height: auto 意味着它可以根据需要进行缩放，允许滚动。

试试这个：

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

Answer 2

这是因为justify-content: center 使您的元素居中（即使它溢出了）。您可以将其关闭并将margin:auto 添加到.modal-section。

示例

.modal {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: oldlace;
  color: #2F2F2F;
  z-index: 99999;
  overflow: auto;
}
.modal-section {
  margin: 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;
}

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