placing element above the center with flexbox [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I wish to place a modal window just about 100px above center of the screen.
In order to center the item, i'm using the simple display: flex, justify-content: center, align-items: center props on the parent.
Is there any elegant way to achieve the result?

Answer 1

transform might help without the need to set a fixed 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

I'm not sure what you want is a flexbox. If you want the modal to sit overtop of the webpage this is best done with a position: absolute leaving the centering to text-align: center of an inline-block modal. or using margin: auto. This is how I'd achieve this:
.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

Try to just add margin-top: -100px and see if that works.
Here is a margin-top reference documentation if you ever require it: margin-top W3Schools