Текст по вертикали и по горизонтали внутри div

Question

У меня есть div, который содержит графический фон, наложенный на текст. Я хочу центрировать этот элемент по горизонтали и по вертикали. Но я не могу заставить текст центрировать по вертикали. До сих пор, у меня есть следующий код:

<div id="step"> 
    <div id="background"> 
     <img src="buttonbackground.png" class="stretch" alt="" /> 
    </div> 
    <div> 
     <h3>some text</h3> 
    </div> 
</div> 

В CSS:

#background { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    z-index: -1; 
} 

#step { 
    text-align:center; 
    color:white; 
} 

.stretch { 
    width:200px; 
    height:40px; 
} 

Использование/метод вертикального выравнивания таблицы клеток я видел часто упоминаемых не совсем работает.

Answer 1

Учитывая, что это H3, я предполагаю, что это заголовок, поэтому, вероятно, это будет одна строка текста. Если это так, просто установите line-heighth3 на высоту контейнера.

Если вместо того, чтобы это пункт вы можете сделать это:

#centeredDiv { 
    position:absolute; 
    top: 50%; 
    left: 50% 
    margin-top:-20px ;(half the height of the container) 
    margin-left: -100px; (half the width of the container) 

}

Не смешивать пикселей с процентами.

Answer 2

Try:

#step { 
    text-align: center; 
    vertical-align: center; 
    color: white; 
    height: 40px; 
} 

EDIT:

В качестве альтернативы, вы можете попробовать явно устанавливая высоту #background в 40px, а не 100%. Он должен добиться такого же эффекта.