CSS - ¿Cómo centrar divs anidados?

Nuevo en CSS.CSS - ¿Cómo centrar divs anidados?

Estoy tratando de centrar divs anidados utilizando el código de abajo

HTML

<html> 
    <head> 
     <title>My website</title> 
     <link rel="stylesheet" type="text/css" href="css/main.css" /> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="formpanel"> 
       <div id="loginForm"> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

CSS

body { 
    margin: 0; 
    background : #90ADB7 url('images/background.png') repeat-x; 
    font-family: verdana, sans-serif; 
    font-size: 0.85em; 

} 

#wrapper { 
    width: 960px; 
    margin: 0 auto; 
    border-style:solid; 
    padding: 190px 0; 
} 

#formpanel { 
    width: 400px; 
    height: 400px; 
    background-color: yellow; 
    margin: auto; 
} 

#loginForm { 
    margin: auto; 
    width: 50%; 
    height: 50%; 
    background-color:blue; 
}

el problema es que el div más interno (#loginForm) se vacía con el borde superior del div externo (#forpanel). ¿Cómo debería centrar el div interno?

pantalla enter image description here

Fuente

2011-12-07 Rahul

Desde @ respuesta de BillyMoon a partir de 2011 está en la cola de eliminación, aquí está el enlace que originalmente publicado: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – royhowie

Se puede utilizar el posicionamiento relativo:

http://jsfiddle.net/a879W/

Fuente

2011-12-07 14:59:07 ptriek

Gracias. Esto funciona. También gracias por jsfiddle. No sabía sobre esta herramienta. – Rahul

para la posteridad: #loginForm { margin: auto; posición: relativa; parte superior: 25%; ancho: 50%; altura: 50%; color de fondo: azul; } – Rahul

#formpanel { 
    position: relative; 
    ... 
} 

#loginForm { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -100px; 
    width: 200px; 
    height: 200px; 
    background-color:blue; 
}

Fuente

2011-12-07 14:56:40

#loginForm { 
    position:absolute; 
    top:25%; 
    margin: auto; 
    width: 50%; 
    height: 50%; 
    background-color:blue; 
}

EDIT: parte superior: 25 no% 50%.

Fuente

2011-12-07 14:57:08 Jivings

creo que debería ser superior: 25% ... – ptriek

Bueno, me lo perdí. Gracias. – Jivings

@Jivings, esto no funciona. ¿Estás seguro de la posición: absoluto? – Rahul

Usted puede utilizar el posicionamiento absoluto:

#formpanel { 
    width: 400px; 
    height: 400px; 
    background-color: yellow; 
    margin: auto; 
    position:relative; 
} 

#loginForm { 
    position: absolute; 
    width: 200px; 
    height:200px; 
    left: 100px; 
    top: 100px; 
    background-color:blue; 
}

Fuente

2011-12-07 14:58:56

¿Y si la ventana cambia de tamaño? El posicionamiento absoluto no es bueno para los componentes de centrado. – Jivings

Supuse, dado que el envoltorio div tiene un ancho fijo, no debería haber necesidad de cambiar el tamaño de la ventana ... –

CSS - ¿Cómo centrar divs anidados?

Respuesta

Cuestiones relacionadas