Question

I have a div that comprises a graphic background overlaid with text. I want to center this element horizontally and vertically. But I can’t get the text to center vertically. So far, I have the following code:

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

In the CSS:

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

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

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

Using the table-cell/vertical-align technique I’ve seen often referenced elsewhere doesn’t quite work.

Answer 1

Given that it’s an H3 i’m assuming it’s a heading so it’s probably gonna be one line of text. If that’s the case just set the line-heightof the h3to the height of the container.

If instead it’s a paragraph you can do this:

#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)

}

Don’t mix pixels with percentages.