HTML and CSS div in middle of screen - html

Question

<style>
.parallax {
background-image: url("Cpage.png");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.box{
position: absolute;
top: 600px;
left: 300px;
width: 900px;
height:600px;
background-color:rgb(0, 32, 45);
font-size:36px;
border-radius: 50%;
}
.cap img{
position: relative;
height:130px;
width:170;
left: 340px;
}
</style>
<div class="parallax">
<div class="box" >
<div class="cap"><img src="Capture.png"/></div>
<p style="color: white;text-align: center;">
LEARNING TOWARDS BETTER FUTURE!<br>
</p>
</div>
</div>
The problem is that when I switch screens. When I go from 15 inch screen to 13 inch screen the div moves. It is not in middle of screen anymore. May be it is because of the "left:" It really gets messy when screen is smaller then that. How can I fix it ?

Answer 1

You can use Flex to help you center it:
.parallax {
display: flex;
align-items: center; // vertical centering
justify-content: center; // horizontal centering
background-image: url("Cpage.png");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
And remove top/left attributes from .box.
Fiddle

Answer 2

.box{
width: 400px;
height:400px;
background-color:rgb(0, 32, 45);
font-size:36px;
border-radius: 50%;
display: block;
margin: 0 auto;
}