[HTML] Centrare verticalmente il testo in div

samurai.sette

Utente Attivo
17 Dic 2015
235
6
18
Ciao a tutti, avrei bisogno di un vostro aiuto.
Come ho scritto nel titolo della discussione ho bisogno di centrare verticalmente il testo all'interno di un div. Ho già cercato e trovato nel sito un articolo ben fatto in cui viene spiegato come fare ma rispetto al mio caso presenta una differenza molto importante.
Nell'articolo il div ha dimensioni ben definite (500px x 300px) mentre nel mio caso conosco solo la larghezza del div (100%). Il valore dell'altezza non la conosco perchè varia in base allo schermo in cui è visualizzata la pagina.
La pagina è strutturata in questo modo
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
    body {
        margin:0;
        padding:0;
        font-size:40px;
        text-align:center;
        }
    #intestazione {
        width:100%;
        height:50px;
        position:fixed;
        top:0;
        background-color:green;
        overflow:hidden;
        }
    #corpo {
        width:100%;
        height:100%;
    margin-top:50px;
        background-color:yellow;
        overflow:auto;
        }
    #fondo {
        width:100%;
        height:50px;
        background-color:blue;
        overflow:hidden;
        position:fixed;
        bottom:0;
        }
    </style>
</head>

<body>
<div id="intestazione">

</div>
<div id="corpo">

</div>

<div id="fondo">

</div>
</body>
</html>

Da come si può leggere il div "corpo" ha dimensioni di 100% x 100%. E' proprio all'interno di questo div che vorrei inserire del testo centrato verticalmente.
Come potrei fare?
Grazie mille, ciao a tutti.
 
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
    body {
        margin:0;
        padding:0;
        font-size:40px;
        text-align:center;
        }
    #intestazione {
        width:100%;
        height:50px;
        position:fixed;
        top:0;
        background-color:green;
        overflow:hidden;
        }
    #corpo {
        width:100%;
        height:100%;
    margin-top:50px;
        background-color:yellow;
        overflow:auto;
        }
    #fondo {
        width:100%;
        height:50px;
        background-color:blue;
        overflow:hidden;
        position:fixed;
        bottom:0;
        }
        #testo {
    background-color:#00FF1D;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
}
    </style>
</head>

<body>
<div id="intestazione">

</div>
<div id="corpo">
  <div id="testo">Inserite qui il contenuto testo inserite qui il contenuto testo inserite qui il contenuto testo </div>
</div>

<div id="fondo">

</div>
</body>
</html>
 

Discussioni simili