How can I place my grid container at the very center of my page? - css-grid

Question

* {
box-sizing: border-box;
border: 0;
list-style-type: none;
}
body {
margin: auto;
font-size: 16px;
background-color: #9f95df;
}
header {
min-height: 15vh;
width: 100%;
display: flex;
place-content: center;
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
background-color: slateblue;
color: #EEEEFF;
text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
}
header span {
font-size: normal;
color: red;
}
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
grid-gap: 3px;
border: 1px solid red;
place-content: center;
}
.grid-container div {
background-color: orange;
}
<header>
<h1>X<span>CodeMedia</span></h1>
</header>
<div class="grid-container">
<div class="item1">Box 1</div>
<div class="item2">Box 2</div>
<div class="item3">Box 3</div>
<div class="item4">Box 4</div>
</div>
I just want my grid-container class to be centered vertically and horizontal on the page.

Answer 1

You already use the needed CSS property place-content: center; and so the grid is centered horizontally. The reason why the grid doesn't seem to be centered vertically is, that the height of the grid is exactly the height of the grid items.
So to fix this, you must increase the height of the grid to the whole page, e.g. height: 100vh;. Although in this case this is a bit too large because of the additional header, where height: 85vh might be more appropriate:
.grid-container {
/* ... */
height: 85vh;
}
* {
box-sizing: border-box;
border: 0;
list-style-type: none;
}
body {
margin: auto;
font-size: 16px;
background-color: #9f95df;
}
header {
min-height: 15vh;
width: 100%;
display: flex;
place-content: center;
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
background-color: slateblue;
color: #EEEEFF;
text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
}
header span {
font-size: normal;
color: red;
}
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
grid-gap: 3px;
border: 1px solid red;
place-content: center;
height: 85vh;
}
.grid-container div {
background-color: orange;
}
<header>
<h1>X<span>CodeMedia</span></h1>
</header>
<div class="grid-container">
<div class="item1">Box 1</div>
<div class="item2">Box 2</div>
<div class="item3">Box 3</div>
<div class="item4">Box 4</div>
</div>

Answer 2

enter code here
<img src="img/dunya.gif" width="500" height="500" >
</center>
</div>
integrate this into your own code it should work