[Resuelto] -¿Es recomendable usar margin-left y margin-right en :root para centrar todo el contenido?

Avatar

En la mayoría de elementos de la página web que estoy haciendo uso margin-left: auto y margin-right: auto, y pensé en escribirlas en :root para que el código sea más limpio

Avatar

No hagas eso, mejor crea una clase que tenga esos estilos. Algo como:

.block-center {
  margin-left: auto;
  margin-right: auto
}

Y a cualquier elemento que quieras centrar solo le agregas esa clase block-center. Eso es css modular y es la mejor de las prácticas.

Avatar

Si ves que escribes dichas propiedades muchas veces y encuentras un patrón que sabes que puedes optimizar, entonces una mejor practica seria crear una clase con las propiedades de margin y posteriormente incluirlas en los contenedores/elementos que desees.

Ejm:

   margin: 0 auto;
}``` 

Y en html colocar dicha clase en cualquier etiqueta que se desee centrar:

```<div class="**center** ">Header</div> ```  


Por otro lado si quieres centrar el contenido dentro de una caja, puedes usar flexbox para ello, creándolo en una clase que puedes reutilizar donde quieras haciendo la misma practica de arriba.

Ejm:

```.centrar-contenido{
  display: flex;
  flex-direction: column;
  align-items: center;
}``` 

Y en html:

```<div class="centrar-contenido">
       <h1>Hello World<h1>
       <p>Esto es un parrafo</p>
   </div> ```


Espero haber entendido tu duda y haya podido ayudarte.
Necesitas iniciar sesión para responder.