Vertical alignment does not work on a table cell

Question

Please check http://jsfiddle.net/4Ly4B/ I have vertical-align: middle on a table-cell that does not approach the middle

Answer 1

An element with display:table-cell ignores min-width and min-height . Instead, you should use height and width .
In addition, if you want to place an element using position:absolute , you transfer the element to the container and assign position:absolute that container.

See this script: http://jsfiddle.net/4Ly4B/3/

Answer 2

vertical alignment: medium; this is basicall used for table-cell. In your example, the position is absolute so you can do it

 .message{ background-color: gray; position: absolute; min-width: 200px; display: table-cell; padding:60px 0px 60px 0px; text-align: center; 

}

Answer 3

The vertical-align property does not work with min-height . Remove min-height and add padding instead.

 .message{ background-color: gray; position: absolute; padding-top: 40px; padding-bottom: 40px; min-width: 200px; display: table-cell; vertical-align: middle; text-align: center; }