centrado vertical ¿por qué solo funciona en safari y firefox?

Citar

Escrito el 08 Jul 2013 06:34 pm

Estoy probando los códigos que voy encontrando para centrar vertical, y este, que creía que iba a funcionar hasta en los explorer antiguos, solo va en safari y firefox.

En chrome, opera y explorer el centrado horizontal va bien, pero el vertical no.

¿Sabéis si me falta algo? ¿O es problema de los navegadores?

Código :

<!doctype html>

<html lang="es">

<head>
   <title>prueba</title>
   <meta charset="utf-8">
   <link rel="stylesheet" href="css/reset.css">
   <style>
      html, body {
         width: 100%;
         height: 100%;
         }
      #wrapper{
         width: 100%;
         height: 100%;
         position: relative;
         border: 1px dotted red;
         }
      #center{
         width: 50%;
         height: 50%;
         position:absolute;
         top:50%;
         left:50%;
         margin: -25% 0 0 -25%;
         border:1px dotted blue;
         }
   </style>
</head>


<body>
   <div id="wrapper">
      <div id="center"></div>
   </div>
</body>
</html>

Por walden

Claber

120 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 08 Jul 2013 08:59 pm

Código CSS :

#wrapper {
         width: 90%;
         height: 90%;
         margin: auto; 
         position: relative;
         top: 5%;
         border: 1px dotted #F00;
}
#center{
         width: 50%;
         height: 50%;
         position:absolute;
         top:25%;
         left:25%;
         border:1px dotted blue;
         }

la formula para top y left sería:
top = (100 - height) / 2
left = (100 - width) / 2

y te olvidas de margenes negativos

Por nasho

Claber