centrar en el eje vertical

[ErikaR]

Hola

quiero centrar un sitio que estoy construyendo con divs en el eje vertical, quede equidistante de arriba y de abajo, como se hace?!

gracias!
erika

[PHPeros]

Código CSS:

display: block;
text-align: center;
margin-bottom: 200px;
 

Que fácil no?

[pzin]

Ya que hay mil y una forma de hacer las cosas, deberías de ser más específico con lo que buscas, o al menos aportar algo de código HTML para saber qué es lo que quieres centrar. Así será más fácil ayudarte.

[PHPeros]

Iniciado por pzin

Ya que hay mil y una forma de hacer las cosas, deberías de ser más específico con lo que buscas, o al menos aportar algo de código HTML para saber qué es lo que quieres centrar. Así será más fácil ayudarte.

No es difícil imaginárselo.

[pzin]

Iniciado por PHPeros

No es difícil imaginárselo.

Claro, pero hay una sutil diferencia entre imaginar y saber.

[ErikaR]

Hola

Probe la sugerencia, pero no pasa nada..
#base{

display: block;
text-align: center;
margin-bottom: 200px;

}

http://www.erikarubaja.com.ar/prueba

Con este codigo se centro el texto que estaba marginado, en vez de centrarse el conjunto del sitio

Lo que quiero lograr es que el sitio no quede pegado al borde de arriba, que quede igual distribuido con respecto a arriba y abajo

gracias!
erika
grac

[PHPeros]

Tal vez:

Código:

vertical-align: middle;

[ErikaR]

No note cambios...alguna otra sugerencia?

#base{ vertical-align:middle;

}


html
<div id="base" >
<div id="encabezado-base" >
<div id="encabezado" >
<div id="contenido" >
</div>
</div>
</div>
</div>

[PHPeros]

Lo último es darle un margin-top: 50%; ...

[pzin]

PHPeros nada de lo que haz dicho realmente sirve para centrar verticalmente en este caso.

Si la altura del elemento es desconocida, es decir, variable según el contenido, yo lo que haría sería añadir un elemento al contenedor, un pseudo-elemento por ser más semántico, que ocupe el 100% de la altura, y luego en el elemento a centrar en si mismo una alineación vertical. En tu caso, algo así debería de servir:

Código CSS:

html, body {
  height: 100%;
  text-align: center;
}
 
body:before {
  display: inline-block;
  height: 100%;
  content: '';
  vertical-align: middle;
}
 
#base {
  display: inline-block;
  vertical-align: middle;
}
 

[ErikaR]

hola pzin,

bueno ahora noto cambios!
http://www.erikarubaja.com.ar/prueba/

pero en algunos navegadores no funciona bien ejemplo:

safari de mac, ipad (aparece fuera de la pantalla el sitio, hay q escrolear para abajo)

firefox pc

alguna sugerencia?

gracias
erika