Válido para XHTML 1.0 Estrícto + CSS
En este punto resolveré dos preguntas populares de un tiro. La primera: ¿Cómo pongo un divisor centrado tanto horizontal como verticalmente?
. Primero le damos medidas al divisor tanto de alto como de ancho, luego, ponemos su punto de origen en el centro haciendo 50% a la derecha y 50% debajo de la página. Por último, cambiamos su margen superior y derecho a un número negativo que corresponde a la mitad de su alto y su ancho respectivamente, quedando finalmente centrado como vemos en este ejemplo.
La segunda pregunta es ¿Cómo hago que este divisor se quede siempre en el centro?
. Para ello, solo debemos agregar la propiedad position:fixed. Esto funciona para cualquier objeto en general que queramos que siempre se encuentre en un punto de nuestra página. Para que puedan probarlo en esta sección, he agregado varias líneas de texto para que puedan desplazarse arriba y abajo en la página y vean el efecto.
Líneas de Texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
El código:
<style type="text/css">
#fijo{
border:#000 solid 1px;
background:#cff;
width:200px;
height:200px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
position:fixed;
}
</style>
El código para IE:
Desafortunadamente, nuestro buen amigo Internet Explorer, desconoce deliveradamente la propiedad position:fixed, por lo que tendremos que agregar un truco especial para que simule la misma propiedad, quedando de la siguiente forma:
<!--[if IE]>
<style type="text/css">
html, body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:auto;
}
#fijo{
position:absolute;
}
</style>
<![endif]-->
Cómo implementarlo:
<div id="fijo">¡Fijo en el centro!</div>
