Centrar un Div por CSS

Martita-

Pues la pequeña duda es la siguiente.

Se puede centrar un <div> por medio de CSS?? Si es asi, como seria?

Gracias....

erdanblo

Darle a los margenes laterales el valor auto:

margin-left: auto;
margin-right: auto;

Más corto:

margin: 0 auto 0 auto;

Pero seria en ese caso, 0 para el margin-top.

A

Quizá ésto te ayude:
http://www.quirksmode.org/css/centering.html

Martita-

Gracias a los dos :)

Ko3iGoN

Con vuestro permiso aprovecho el post, viendo los ejemplos de quicksmode me he fijado en que para centrar verticalmente el contenido usan una tabla y dentro meten el contenedor.
Hay alguna forma de hacerlo solo con contenedor?

Gracias

Martita-

margin: 0 auto 0 auto;

Eso me va bien en Firefox, pero ahora que he probado a ver la web en IE me falla, no me lo centra en IE, en firefox va perfecto.

P.D. Ahora IE no me centra ni un simple text-aling: center; porque puede ser? no me centra nada que no este entre <center> y </center> pero firefox si que me lo coge todo bien, no lo entiendo.

Deathtime

prueba esto:
#capa {
width: 800px; /* width de tu capa */
margin: auto;}

#5 si que se puede alinear verticalmente solo con divs sin necesidad de tablas, para ello necesitas 3 divs, luego te lo busco que lo tengo anotado en alguna parte.

Deathtime

Para centrar un div verticalmente ( No funciona en IE ) aunque se puede trastear para que funcione.

el Html

<div id="Outer">
<div id="Middle">
<div id="Inner">
Lo que deseas alinear verticalmente
</div>
</div>
</div>

y su CSS

#Outer {
height: 500px;
overflow: hidden;
position: relative;
border:1px solid black;
}
#Outer[id] {
display: table;
position: static;
}
#Middle {
position: absolute;
top: 50%;
border: 1px solid red;
}
#Middle[id] {
display: table-cell;
vertical-align: middle;
position: static;
}
#Inner {
position: relative;
border:1px solid blue;
top: -50%;
}
#Inner[id] {
position: static;
}

puedes tocar las alturas y los bordes que eso lo he puesto yo.

Ko3iGoN

Muchas gracias deathtime, seria genial conocer el arreglo para IE, ya que las paginas que he hecho son principalmente vistas desde ese navegador.

Saludos

erdanblo

Prueba con line-height dandole como valor, el valor de la altura del div donde lo pongas.

Usuarios habituales

  • erdanblo
  • Ko3iGoN
  • Deathtime
  • Martita-
  • Archville