La propiedad text-align permite alinear horizontalmente el texto de un elemento; mientras margin: 0 auto permite centrar elementos de bloque.
La propiedad clip-path nos permite establecer un área dentro de un elemento, y solo esa área interna será visible, el resto será transparente permitiendo ver los elementos de capas inferiores.
.selector {
/*Ejemplos*/
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 94%)
clip-path: circle(150px at 50% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(0 0, 23% 0, 60% 48%, 24% 100%, 0 100%, 38% 48%);
clip-path: inset(10px 10px); /*Corta el área interna de la figura*/
}
Cuando se utiliza position: absolute a diferencia del valor relative el elemento NO conserva el espacio original y otros elementos pueden ocupar su lugar; si a su elemento padre no se le especifica la propiedad position: relative luego los valores top, left, etc toman como referencia el viewport y no el contenedor.
La propiedad CSS object-fit indica cómo el contenido de un elemento, por ejemplo un <img> o <video>, debería redimensionarse para ajustarse a su contenedor. Mientras la propiedad CSS object-position permite alterar la alineación del contenido del elemento.
Declarar variables de apilamiento para dar valores a la propiedad z-index nos permite posicionar elementos en capas a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport, modificando el contexto de apilamiento de forma organizada.
:root{
--z-back: -10;
--z-normal: 1;
--z-tooltip: 10;
--z-fixed: 100;
--z-modal: 1000;
}
En el RWD también debe considerar a nivel de experiencia de usuario la usabilidad y accesibilidad al momento de adaptar tanto el maquetado como el contenido a diferentes dispositivos, en este caso la tipografía. Por lo tanto al momento de diseñar es una buena practica declarar variables CSS con valores para distintos tamaños de fuente; sobre escribiéndolas a diferentes medias queries, lo que permite al momento de usar la propiedad font-size que esta posea un valor dinámico gracias a las variables CSS.
La propiedad text-align permite alinear horizontalmente el texto de un elemento y dentro del ancho (width) de su contenedor. Se puede aplicar directamente sobre el selector o etiqueta del texto ó sobre su elemento padre, centrando los textos de todos los elementos hijos, sean textos dentro de etiquetas: div, p, etc, este debe poseer la propiedad 'display: block'.
Mientras margin-right: auto y margin-left: auto aplicados en una misma regla CSS es una forma muy utilizada para centrar un elemento como tal, este debe poseer la propiedad 'display: block'.
.selector{
margin: 0 auto;
/*
margin-right: auto;
margin-left: auto;
*/
/* margin: auto; //es una mala practica */
}