Question

我希望在屏幕中心上方100px左右放置一个模态窗口。为了使项目居中，我使用父母的简单display: flex, justify-content: center, align-items: center道具。

有没有优雅的方法来实现结果？

Answer 1

我不确定你想要的是一个弹性箱。如果您希望模态位于网页的顶部，最好使用position: absolute将中心定位到text-align: center模式的inline-block。或使用margin: auto。这就是我实现这个目标的方式：

.modal-container{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 100px);
  text-align: center;
}

.modal{
  display: inline-block;
  background: lightblue;
  padding: 20px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut urna id ex suscipit congue. Aliquam erat volutpat. Duis porta, ex at commodo convallis, lectus ipsum mattis dui, luctus commodo erat nunc eu tortor. Nam dapibus accumsan feugiat. Sed tempor euismod vestibulum. Cras quis vulputate lorem. Aliquam erat volutpat. In eu dolor sem. Nunc sed justo nisl. In cursus velit ut lectus consequat, laoreet pretium augue gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam mi orci, luctus sit amet enim eget, luctus consequat est. Nulla mollis est ut tempus sollicitudin. Aenean feugiat vitae magna a egestas. Sed id fermentum metus.</p>

<p>Pellentesque consequat pharetra quam, varius efficitur sapien efficitur a. Sed pulvinar bibendum velit, lobortis aliquam libero finibus dictum. Nam non dolor imperdiet, bibendum lectus consequat, tempus ipsum. Aenean sollicitudin id mauris vel fermentum. Aenean pulvinar dolor sit amet magna ornare, sit amet commodo lectus eleifend. Aliquam vitae nulla tempus, aliquet massa ut, interdum lacus. Maecenas eu magna aliquet ante ornare feugiat. Donec vel tellus vestibulum, porta augue ut, bibendum quam. Praesent ornare eros vitae massa vulputate efficitur.</p>

<p>Pellentesque eget auctor nisl, vulputate scelerisque elit. Etiam at laoreet est. Fusce vitae lacus dui. Proin sed maximus felis. Sed venenatis euismod neque, ut blandit nisl laoreet sed. Aenean commodo turpis sed diam accumsan aliquam. Proin fermentum ac erat sed ornare. Quisque iaculis massa turpis, eu convallis risus placerat nec. Nunc gravida lectus quis efficitur sagittis. Pellentesque in nisi ex. Duis condimentum congue risus in semper. Proin tincidunt urna dolor, et aliquam justo posuere et. Duis lacinia justo nec condimentum euismod. Suspendisse eros ex, pulvinar id quam in, maximus ullamcorper augue. Donec sit amet sodales magna, eget cursus purus. Cras eget arcu in urna dictum ornare.</p>

<p>Aenean at lacus luctus, eleifend ante hendrerit, rutrum justo. Cras quis tortor dapibus, commodo purus in, ornare metus. Ut sit amet lectus quis tortor iaculis luctus ut et leo. Phasellus tristique rutrum gravida. Mauris vehicula vel turpis a aliquam. Integer arcu leo, iaculis id libero vitae, semper fermentum risus. Proin bibendum magna nisi, nec malesuada velit auctor eget. Aenean bibendum purus ac congue mollis. Nam faucibus cursus rhoncus. Proin ultricies sodales tortor nec pellentesque. Curabitur lacinia mauris lectus, at ultrices leo venenatis eget. Maecenas metus dolor, eleifend ac consectetur id, mollis ornare justo.</p>

<p>Morbi vel rhoncus leo, non pretium urna. Aliquam ac ligula vulputate, scelerisque dolor at, auctor nisi. Aenean eget consectetur urna. Donec quam diam, consequat a porta quis, mollis non diam. Donec urna turpis, dapibus eu enim tristique, placerat consequat quam. Phasellus nec lectus porttitor, posuere tortor vulputate, rhoncus quam. Vestibulum pulvinar tempus elit. Cras id lacus lacus. Donec vulputate quis odio vel tincidunt. Praesent sollicitudin, nulla at lobortis malesuada, nibh dui sodales justo, vel ultrices magna elit sed felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam aliquam, elit eleifend pharetra ullamcorper, massa justo vulputate quam, eget egestas nisi nibh faucibus mi. Phasellus faucibus elit vitae quam sodales congue.</p>


<div class="modal-container">
  
  <div class="modal">This is my modal</div>

</div>

Answer 2

transform可能会有所帮助，而无需设置固定的height：

https://codepen.io/gc-nomade/pen/JyNMRx

div {
  transform : translatey(-50%);/* if you do want 100px, update value to -100px */
  border:solid;
  padding:1em;
  background:rgba(255,255,255,.5)
}
body {
  margin:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  /* show center X/Y */
  background:
    linear-gradient(to left,lime,lime) no-repeat 0 0,
    linear-gradient(to left,yellow,yellow) no-repeat 0 100%,
    linear-gradient(to left,red,red) no-repeat 100% 100%,
    linear-gradient(to left,blue,blue) no-repeat 100% 0;
  background-size:50% 50%;
  }

<div> above center</div>

Answer 3

尝试添加margin-top: -100px并查看是否有效。

如果您需要，请参阅以下边距参考文档：margin-top W3Schools

使用flexbox将元素放置在中心上方

3 个答案: