Vertical and Horizontal alignment of text with CSS [duplicate] - css

Question

This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
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;
}

Answer 1

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.

Answer 2

You can change just your CSS to this (no HTML changes):
div{
background: red;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
text-align: center;
line-height: 100px;
}
The text-align is self-explanatory. The line-height forces the text to the center by matching the height of a single line to that of the div. You will have to adjust it to your needs each time.
JSFiddle

Answer 3

There are different ways. Here is one:
HTML:
<div>
<span>magix!</span>
</div>
CSS:
div {
text-align:center;
display:table;
}
span {
display: table-cell;
vertical-align:middle;
}
Fiddle