CSS - Come centrare le div annidate?

Nuovo per CSS.CSS - Come centrare le div annidate?

Sto cercando di centrare div annidati usando il codice seguente

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; 
}

il problema è che il div più interno (#loginForm) si svuota con il bordo superiore del div esterno (#formpanel). Come dovrei centrare il div interno?

Schermata enter image description here

fonte

2011-12-07 Rahul

Dal @ di BillyMoon risposta dal 2011 è nella coda di eliminazione, ecco il link che originariamente pubblicato: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – royhowie

Si potrebbe utilizzare il posizionamento relativo:

http://jsfiddle.net/a879W/

fonte

2011-12-07 14:59:07 ptriek

Grazie. Questo funziona. Grazie anche per jsfiddle. Non conoscevo questo strumento. – Rahul

per i posteri: #loginForm { margine: auto; posizione: relativa; superiore: 25%; larghezza: 50%; altezza: 50%; colore di sfondo: blu; } – Rahul

#formpanel { 
    position: relative; 
    ... 
} 

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

fonte

2011-12-07 14:56:40

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

EDIT: top: 25 non% al 50%.

fonte

2011-12-07 14:57:08 Jivings

penso che dovrebbe essere superiore: 25% ... – ptriek

Bello, mi sono perso. Grazie. – Jivings

@Jivings, questo non funziona. sei sicuro della posizione: assoluta? – Rahul

È possibile utilizzare il posizionamento assoluto:

#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; 
}

fonte

2011-12-07 14:58:56

E se la finestra viene ridimensionata? Il posizionamento assoluto non è utile per i componenti di centraggio. – Jivings

Presumo, dal momento che il div del wrapper ha una larghezza fissa, non ci dovrebbe essere alcuna necessità di ridimensionare la finestra ... –

CSS - Come centrare le div annidate?

risposta

Problemi correlati