Skip to main content
se añadieron 28 caracteres en el cuerpo
Origen Enlace

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>

Mi problema es que trato de alinear un div, pero este en vez de alinearse completamente de manera horizontal, el div comienza a partir del centro y lo que yo quiero es que este div alinea su centro con 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>

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>

Origen Enlace

¿Por qué este div no se alinea totalmente?

Mi problema es que trato de alinear un div, pero este en vez de alinearse completamente de manera horizontal, el div comienza a partir del centro y lo que yo quiero es que este div alinea su centro con 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>