Vertical and Horizontal alignment of text with CSS

This question already has an answer here:

I’m trying to align a text, horizontally and vertically, inside a div box (with background color) but I’m not being able to do it.

I’ve searched online and margin: auto, text-align: center aren’t doing the work.

Any tips?

Check FIDDLE.

HTML

<div id="services">
  <div class="holder container clearfix">
    <div class="bgtop"><span class="top">Corte cabelo + Afiar</span></div>
    <div class="bgprice"><span class="price">10€</span></div>
  </div>
</div>

CSS

#services .holder .bgtop{
  background-color: #27ae60;
  height:50px;
  width:200px;
  z-index: 1;
}
#services .holder .bgprice{
  height:50px;
  width:90px;
  background-color: #272727;
  z-index: 1;
}
#services .holder span.top{
  color: white;
  font-style: italic;
  font-weight: bold;
  font-size: 1.000em;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
#services .holder span.price{
  color: white;
  font-style: italic;
  font-weight: bold;
  font-size: 1.500em;
  z-index: 2;
  text-align: center;
}

solution

Here is a common approach used for vertical/horizontal centering.

BASIC EXAMPLE HERE

div {
  background: red;
  width:100px;
  height: 100px;
  display:table;
}
div > span {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

Basically, the parent element’s display is changed to table. Add in a child element, in this case a span element to wrap the text. The span should have the properties display:table-cell/vertical-align:middle for vertical centering. Then text-align:center is simply for horizontal centering.

Here is an example using the styling you had.