How do You Make Items Stay Centered on a Screen no Matter the Size? [duplicate]

<div class = ‘jobFields’>
<div class = ‘field-1’></div>
<div class = ‘field-2’></div>
<div class = ‘field-3’></div>
<div class = ‘field-4’></div>
<div class = ‘field-5’></div>
<div class = ‘field-6’></div>
<div class = ‘field-7’></div>
<div class = ‘field-8’></div>
<style>
.field-1 {
position: absolute;
width: 250px;
height: 150px;
top: 400px;
left: 5%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}

.field-2 {
position: absolute;
width: 250px;
height: 150px;
top: 400px;
left: 28.6%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}

.field-3 {
position: absolute;
width: 250px;
height: 150px;
top: 400px;
left: 52.2%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}

.field-4 {
position: absolute;
width: 250px;
height: 150px;
top: 400px;
left: 75.8%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}

.field-5 {
position: absolute;
width: 250px;
height: 150px;
top: 620px;
left: 5%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}

.field-6 {
position: absolute;
width: 250px;
height: 150px;
top: 620px;
left: 28.6%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}

.field-7 {
position: absolute;
width: 250px;
height: 150px;
top: 620px;
left: 52.2%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}

.field-8 {
position: absolute;
width: 250px;
height: 150px;
top: 620px;
left: 75.8%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
</style>

</div>
</div>
</body>