css - Vertical centering of text in div not working -

i have turned this guide solve problem of vertically centering text within div. , believe understand says, still doesn't work.

.number {     position: relative;     height:50px;     margin: -25px 0 0 0;     top: 50%;     background-color: #00ff00; } 

here fiddle, recreates problem. want green area (.number) centered vertically within button (.numberelement)

where problem? reckon jquery mobile complicating things , creating structures not foreseeing...

thank you!

sandro

you need make changes css so:

.numberelement {     position: absolute;     width:30%;     height:200px;     margin:0px;     display:table; }  .numberelement .ui-btn-inner {     display:table-cell;     vertical-align:middle; } 

working demo