Vertically align text - css

Question

Im having problem vertically aligning a text with CSS. I have tried probably everything but it just doesnt want to work. You can see my demo jsfiddle demo here:
http://jsfiddle.net/zcU7M/7/
.section {
text-align: center;
vertical-align: middle;
display:table-cell;
}
With this code it should work but something is wrong.
How can I fix this? Thanks in advance.
EDIT: Updated demo: http://jsfiddle.net/zcU7M/7/

Answer 1

Write:
.section {
display: table-cell;
vertical-align:middle;
}
Updated Fiddle.

Answer 2

The .section needs the display: table-cell
.section {
height: 200px;
background:#ccc;
border-bottom: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
display:table-cell;
}
The display:table-cell is what allows an element to have children vertically aligned, so it has to be on the parent to be able to have the children aligned vertically.
Here's a Working Demo.

Answer 3

For a vertical paragraph align use that:
p {
height:200px;
line-height:200px;
text-align:center;
vertical-align: middle;
}
JSFiddle example: Exemple

Answer 4

The problem is, that the <p>-Tag just adds some margin at the bottom. You can see this, when inspecting with firebug. Simply add a margin: 0 to your .section p selector:
.section p {
font-size: 15px;
font-family: Arial;
font-style: italic;
margin: 0;
}
http://jsfiddle.net/zcU7M/22/

Answer 5

all credit goes to this link owner #Sebastian Ekström Link, please go through this.
see it in action codepen,
by reading above article I crated a demo fiddle also.
With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height.
The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text etc.
So, to do this we write:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
That’s all you need. It is a similar technique to the absolute-position method, but with the upside that we don’t have to set any height on the element or position-property on the parent. It works straight out of the box, even in IE9!
To make it even more simple, we can write it as a mixin with its vendor prefixes: