Mi problema es que trato de alinear un div, pero este en vez de alinearse completamente de manera horizontal, el div comienzase empieza a imprimir en pantalla a partir del centro de la pagina y lo que yo quiero es que esteel div alineaalineé 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? ¿Tiene esto algo que ver con la propiedad "display"?
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>