Question

我对移动设备上的居中元素有问题，当高度降低时，顶部内容被隐藏，但在台式机上就好了。请查看下面的链接以查看截图中的问题

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>

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

2 个答案: