Salve a tutti,
ho un problema nel dimensionare un box all'interno di un contenitore con padding.
Sto utilizzando Bootstrap e semplicemente devo sovrapporre un titolo ad un'immagine. Il titolo deve essere centrato sia orizzontalmente che verticalmente, in base al contenitore, e l'immagine non pu´┐Ż essere impostata con la propriet´┐Ż background ma deve essere inserita con tag <img>
Codice HTML:

codice:
<div class="row">
    <div class="col-sm-6">
        <div id="div-1">
            <div id="div-2">
                <div id="div-3">
                    <h1>Titolo</h1>
                </div>
           </div>
        </div>
        <img src="img.jpg">
    </div>
</div>
Codice CSS:
codice:
#div-1 {
    position: absolute;
    width: 100%;
    height: 100%;
}
#div-2 {
    display: table;
    width: 100%;
    height: 100%;
}
#div-3 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
Riesco a posizionare il titolo sopra all'immagine grazie alla posizione assoluta del #div-1, se imposto l'immagine con absolute essa si sposta altrove.
Ora, per far funzionare table-cell e vertical-align ho bisogno che #div-1 abbia dimensioni massime rispetto al contenitore, che ´┐Ż .col-sm-6. Questo contenitore ha per default posizione relativa e padding di 15px. #div-1 prende quindi il 100% di larghezza e altezza da .col-sm-6, avendo position absolute. Il problema si presenta qui, il 100% in larghezza e altezza calcola anche il padding, cos´┐Ż #div-1 ´┐Ż largo 30px in piu. Questi 30px si estendono tutti sul lato destro, perche il <div> viene posizionato a sinistra dopo il padding di .col-sm-6.
Come posso risolvere questo problema? Premetto che non voglio dare padding-right: 30px a #div-1.
Se qualcosa non ´┐Ż chiara chiedete. Grazie