Centrar Posiciones Absolutas

Cuando se está trabajando con imágenes de un menú o un logo en un sitio web, se quiere lograr una posición correcta de los elementos, para tener un buen diseño y que todo quede organizado. Este código nos ayuda a centrar los elementos que usen la propiedad position: absolute; (Posiciones Absolutas) en una hoja de estilos.

[css]
.center {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
width: 150px;
height: 100px;
background-color: red;
border: 1px solid black;
}
[/css]

Las propiedades mas importantes en este código son:

[css]
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
[/css]

Ya que son las que alinean el elemento al centro. A partir de este ejemplo puedes añadir lo que necesites para dar un mejor estilo al elemento.

Recomendado