Centrado horizontal y vertical de un elemento HTML

Para centrar cualquier elemento HTML tenemos que tener en cuenta como esta definida su anchura y altura. Las dimensiones de los elementos podemos definirlas en porcentajes o en píxeles y dependiendo de esta unidad de medida el elemento será centrado de una forma u otra.


Cuando las dimensiones del elemento están definidas en porcentajes su centrado es muy sencillo y se hará de la siguiente forma:

#elemento{
   width: 60%;
   height: 40%;
   margin-left: 20%;
   margin-right: 20%;
   margin-top: 30%;
   margin-bottom: 30%;
}

Es decir, habrá que asignar un margen con la mitad del ancho y alto del elemento

Cuando el tamaño del elemento esta definido en píxeles haremos lo siguiente:

#elemento{
   width: 540px;
   height: 400px;
   margin: -200px 0 0 -270px;
   left: 50%:
   top: 50%;
   position: relative;
}

Asignamos un margen negativo por la izquierda de la mitad del ancho total del elemento; un margen superior negativo con la mitad de la altura total; lo posicionamos tanto por la izquierda como por la parte superior al 50% y establecemos su posición a relativa.