Buenas noches,
El problema que plantea el señor mmm_240 es muy frecuente y crea no pocos quebraderos de cabeza a clientes y usuarios de páginas web diseñadas por personas sin la debida previsión a la hora de valorar que sus creaciones deben ir orientadas a una perfecta visualización en cualquier formato de pantalla y a través de cualquier cliente.
La popularización de ordenadores de dimensiones cada vez más reducidas, así como dispositivos móviles con acceso a Internet, deja obsoletas técnicas de centrado vertical válidas en tanto en cuanto los monitores más pequeños ofrecían – salvo contadas excepciones – la clásica dimensión 800x600, tan conocida por todos nosotros.
La solución basada en aplicar la propiedad margin: 0px auto no es válida en diversos navegadores, entre los que se encuentran Internet Explorer (y no en su versión 6.0, como se ha apuntado en este hilo de discusión, sino actualmente).
Su mecánica se basa en colocar la propiedad citada en la regla correspondiente al selector del elemento a centrar (a partir de aquí “contenido”), como sigue:
#contenido {
POSITION: relative;
MARGIN: 0px auto;
WIDTH: 800px;
HEIGHT: 600px;
}
Funciona para el centrado horizontal, como bien afirma besotico, pero no ofrece respuesta al problema del centrado vertical, con la caja generalmente localizada en el borde superior.
El darle a la propiedad MARGIN los valores “0px auto 0px auto” ofrece el mismo resultado, ya que es una redundancia innecesaria del anterior, al tener el mismo significado de acuerdo con las reglas de interpretación de CSS, es decir, un valor de 0 píxeles para los márgenes superior e inferior y un valor de autocentrado para los márgenes izquierdo y derecho.
Podéis probarlo y comprobarlo con este trozo de código:
<style type=text/css>
body {
MARGIN: 0px;
BACKGROUND: #fff;
}
#contenedor {
POSITION: relative;
MARGIN: 0px auto 0px auto;
WIDTH: 400px;
HEIGHT: 300px;
BACKGROUND: #FF0000;
}
</style>
<body>
<div id="contenedor"></div>
</body>
El resultado es el mismo con MARGIN: 0px auto 0px auto; y con MARGIN: 0px; en Chrome, Firefox e Internet Explorer: el elemento “contenedor” se centra horizontalmente pero se posiciona a partir del borde superior.
En su momento se apuntaron soluciones de diversa índole para solventar la falta de respuesta por parte de los navegadores al centrado vertical, con propuestas como las que pueden verse en la dirección aportada por jomaruro:
http://www.csslab.cl/2007/01/12/cent...tical-con-css/
La visita a esta página muestra una primera solución, modificada después a través de una actualización con la siguiente formulación:
http://www.csslab.cl/ejemplos/centradovertical2.html
Su respuesta al problema es solo aparente, ya que, como bien describen varios de los participantes en la discusión originada a continuación, la visualización en pantallas de reducido tamaño ofrece el inconveniente que inicia precisamente este hilo de debate; esto es, la pérdida de parte del contenido del contenedor en su parte superior e izquierdo como consecuencia de la aplicación del método utilizado.
Así, se trata de posicionar el origen de coordenadas del contenedor en el centro del espacio disponible en la pantalla en que se visualiza por aplicación de un valor de 50% a las propiedades TOP y LEFT; para, acto seguido, proceder a la corrección que daría centrado al mismo elemento, mediante la técnica de subir la mitad de su altura y desplazar la mitad de su anchura hacia la izquierda dando valores negativos a la propiedad MARGIN.
El código está accesible en la dirección URL para el que quiera comprobar que, aparentemente funciona, salvo que se proceda a su visionado en una pantalla de menor tamaño. Y ello porque las operaciones descritas afectan a realidades distintas: una (TOP y LEFT al 50%) juegan con el tamaño de la pantalla; y otra, (MARGIN en negativo) con el tamaño del contenedor.
Por ello, sólo resuelve el problema cuando el contenedor y el espacio disponible en la pantalla se encuentran en las proporciones adecuadas.
Otro ejemplo de código, también fallido en cuanto intenta visualizarse en pantallas de reducido tamaño, puede ser éste:
<style type="text/css">
html,body {
HEIGHT: 100%;
MARGIN: 0 px;
PADDING: 0px;
}
body {
TEXT-ALIGN: center;
MIN-WIDTH: 800px;
MIN-HEIGHT: 400px;
}
#elemento {
POSITION: absolute;
TOP: 50%;
MARGIN-TOP: -200px;
LEFT: 0px;
WIDTH: 100%;
}
#contenedor {
WIDTH: 800px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
HEIGHT: 400px;
BACKGROUND: #ff0000;
}
</style>
</head>
<body>
<div id="elemento">
<div id="contenedor"></div>
</div>
</body>
</html>
Se han buscado y probado alternativas, variaciones y correcciones a este mismo procedimiento, que, con mayor o menor imaginación y empeño pretenden ofrecer la solución a este dilema.
En su momento, yo mismo realicé un estudio sobre esta cuestión, encontrando una respuesta satisfactoria y definitiva a través de la utilización del posicionamiento flotante en lugar del absoluto.
Así, partimos de este nuevo código que incluye html y css, y que, como podréis apreciar, ofrece una solución válida con independencia de las dimensiones de la pantalla en que se visualice el modelo:
<style type="text/css">
html, body {
HEIGHT: 100%;
}
body {
MIN-WIDTH: 800px;
MIN-HEIGHT: 500px;
BACKGROUND: #fff;
}
#elemento-flotante {
MARGIN-TOP: -250px;
WIDTH: 100%;
FLOAT: left;
HEIGHT: 50%
}
#contenedor {
POSITION: relative;
WIDTH: 800px;
MIN-HEIGHT: 500px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
CLEAR: both;
BACKGROUND: #000;
}
</style>
<body>
<div id="elemento-flotante"></div>
<div id="contenedor"> </div>
</body>
La razón de la operatividad de esta solución se basa en la conjunción de la naturaleza propia de los elementos flotantes y la propiedad “clear” aplicada en relación a los mismos en otros elementos del conjunto.
Así, un elemento flotante se caracteriza por quedar fuera del flujo normal de la página, colocándose a derecha o izquierda según se le oriente.
La propiedad “clear” determina, para un elemento dado, que ningún elemento flotante quede a derecha, izquierda o a ambos lados del mismo aplicándole el valor correspondiente.
De esta forma, si colocamos un elemento a continuación de otro con posicionamiento flotante – como son el elemento “contenedor” tras “elemento-flotante” –, el primero se situará tras el segundo por aplicación de la propiedad “clear” con valor “both” que vemos en el código.
De esta forma, “elemento-flotante” actúa, por decirlo de alguna forma, como límite superior del elemento “contenedor”.
Si articulamos un juego de medidas y proporciones entre body, elemento “contenedor” y le damos a “elemento-flotante” la propiedad “float” y a “contenedor” la propiedad “clear: both”, tenemos un centrado perfecto horizontal y verticalmente.
Para comentarlo detalladamente:
html, body {
HEIGHT: 100%;
}
body {
MIN-WIDTH: 800px;
MIN-HEIGHT: 500px;
BACKGROUND: #fff;
}
Damos al html y body una altura de 100% con respecto al espacio disponible, aunque estableciendo a continuación unas medidas mínimas de 800px en anchura y 500px coincidentes con las del elemento “contenedor”.
-----------------------------------------------------------
#elemento-flotante {
MARGIN-TOP: -250px;
WIDTH: 100%;
FLOAT: left;
HEIGHT: 50%
}
A “elemento-flotante” se le impone un posicionamiento flotante, una anchura del 100% y una altura del 50%, que será completada con un margen negativo correspondiente a la mitad de body, lo cual determina que escape por el límite superior de body, debido a que el 50% es, en este caso, 250px.
-----------------------------------------------------------
#contenedor {
POSITION: relative;
WIDTH: 800px;
MIN-HEIGHT: 500px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
CLEAR: both;
BACKGROUND: #000;
}
El elemento “contenedor” recibe una anchura de 800px, y es posicionado relativamente para su centrado horizontal automático con respecto a la anchura disponible mediante
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
Además, se le da una altura mínima igual a la del body, y se le aplica la propiedad “clear” con el valor “both” para “limpiar” la presencia de cualquier elemento flotante tanto a derecha como a izquierda.
En este caso, “elemento-flotante”.
De este modo, “elemento-flotante” siempre se coloca encima del elemento “contenedor”, y con su límite inferior coincidiendo con el límite superior de body,
actuando a su vez a modo de límite superior del elemento “contenedor”, que no puede escapar de la zona de visualización disponible en la pantalla para cualquier height que quiera dárlese y tamaño de pantalla en prácticamente todos los navegadores existentes en el mercando.