Mi problema es que el div se empieza a imprimir en pantalla a partir del centro de la pagina y lo que yo quiero es que el div alineé su centro con el centro de la pagina, es decir, gráficamente hablando que la linea vertical blanca que se forma entre los cuadros celestes quede en el centro de la pagina ¿Cómo lo ajusto?
body {
width: 100%;
}
.container {
display: grid;
grid-template-columns: repeat(2, 100px);
grid-template-rows: repeat(4, 100px);
grid-gap: 10px;
}
.item {
background-color: #5DADE2;
text-align: center;
}
#centrar {
margin-left: auto;
margin-right: auto;
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Mycss.css">
<title>Pruebas</title>
</head>
<body> <!-- s,m,lg,xl-->
<div id="centrar">
<div class="container">
<article class="item">1</article>
<article class="item">2</article>
<article class="item">3</article>
<article class="item">4</article>
<article class="item">5</article>
<article class="item">6</article>
<article class="item">7</article>
<article class="item">8</article>
</div>
</div>
<!--<script src="Myjs.js" type="text/javascript"></script> -->
</body>
</html>