Helping with centering things - html

Question

I wants to make a structure of: top, middle and bottom.
I wants that the top will be 30px from the top, bottom 30px from the bottom and that the text in the middle will be exactly the same distance from bottom to top (this is my main problem).
And of course that my goal that it will be adapted to all the resolutions.
Thanks in advance :)

Answer 1

You could use absolute positioning.
You can play around with the Codepen link here
HTML:
<div id="top">this is top</div>
<div id="middle">
<span class="full_center">middle is here</span>
</div>
<div id="bottom">bottom down below</div>
CSS:
The trick lies in the .full_center class
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#top {
background-color: #ccc;
height: 30px;
position: relative;
top: 30px;
}
#middle {
background-color: aliceblue;
min-height: calc(100vh - 60px);
height: auto;
}
#bottom {
height: 30px;
background-color: #ccc;
position: relative;
bottom: 30px;
}
.full_center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}

Answer 2

Try Using display:flex;. It's the closest I could draw from your question. Here I used background-color:red; to show the 30px distance from top and bottom.
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.outer{
width:100%;
height:100vh;
background-color:red;
padding:30px 0;
}
.inner{
height:100%;
width:100%;
background-color:green;
display:flex;
align-items:center;
}
p{
width:60%;
margin:0 auto;
text-align:center;
color:white;
font-size:2em;
}
<div class="outer">
<div class="inner">
<p>This is text<br>
This is text<br>
This is text<br>
This is text<br></p>
</div>
</div>