Element stays at the highest part of the screen - html

Question

So, I want this picture in the middle of the screen. slightly above the middle of the page. it works for other screen sizes but for this size 1024px it only stays at the top of the screen unless I use bottom: (some px height); but all of my other pages don't need it. I was wondering if anyone knew a way to move this to the middle of the screen but slightly higher than the exact middle of the screen without for example bottom: 140px. if not that fine also can someone show me how to optimize this I know my code is sloppy and can use some work and can be better equipped to handle different sizes of pages. 1024 or 2000px for example. Thank you
#media only screen and (max-device-width: 1024px){
#logo {
position: relative;
bottom: 700px;
}
#logo img{
position: relative;
width: 9%;
height: auto;
bottom: -20px;
}
#header_size{
width: 70%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#border{
border-radius: 30px;
border: 10px;
border-color: black;
border-style: double;
width: 100%;
height: 100%;
}
.right_and_margin {
margin:0 auto;
width: 40%;
height: 20%;
}
.forum_styling{
height: 55px;
width: 600px;
font-size: 25pt;
}
p {
font-size: 22pt;
font-weight: bold;
color: white;
margin-top: 5%;
}
}
<div class="right_and_margin">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Foster_Reservoir_%28Linn_County%2C_Oregon_scenic_images%29_%28linnDA0050a%29.jpg/250px-Foster_Reservoir_%28Linn_County%2C_Oregon_scenic_images%29_%28linnDA0050a%29.jpg
" alt="Image" id="border">
<p>Thank you for the help</p>
</div>

Answer 1

if i correctly understand you here is a solution. In flexbox we trust :)
html,
body {
height: 100%;
margin: 0;
}
.right_and_margin {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="right_and_margin">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Foster_Reservoir_%28Linn_County%2C_Oregon_scenic_images%29_%28linnDA0050a%29.jpg/250px-Foster_Reservoir_%28Linn_County%2C_Oregon_scenic_images%29_%28linnDA0050a%29.jpg" alt="Image" id="border">
<p>Thank you for the help</p>
</div>

Answer 2

Have a look at flexbox for horizontal and vertical alignment. Should be simple to add the following properties to the right element for your needs:
display: flex;
justify-content: center;
align-content: center;
Ressource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/