將元素放置在具有柔性盒的中心上方

Question

我希望在屏幕中心的上方放置一個模式窗口，其大小約爲100px。 爲了讓物品居中，我在父項上使用了簡單的display: flex, justify-content: center, align-items: center道具。

是否有任何優雅的方式來實現結果？

Answer 1

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 2

我不確定你想要的是一個flexbox。如果您希望模態位於網頁上方，最好使用position: absolute，以inline-block模態的中心爲text-align: center。或使用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 3

嘗試只需添加margin-top: -100px，看看是否可行。

這裏是一個邊距參考文檔，如果你需要它：margin-top W3Schools