What is the best way to position a horizontally centered element at the top, a horizontally centered at the bottom and an element at the center of the screen?
>Solution :
You need to set the height of the html and body to 100%, then use flexbox with flex-direction: column; to make it operate vertically, and justify-content: space-between; to do the spacing.
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: 0;
}
body>* {
border: 1px solid lime;
}<body>
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</body>