vertical-align middle not working on table-cell

Question

请检查http://jsfiddle.net/4Ly4B/我已经vertical-align: middle table-cell中的中间位置不会居中

Answer 1

An element with display:table-cell ignores min-width and min-height . You have to use height and width instead.
Also, if you want to position the element using position:absolute , you wrap the element in a container, and assign position:absolute to this container.

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

Answer 2

The property vertical-align doesn't work with min-height . Remove min-height and add padding instead of it.

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

Answer 3

vertical-align: middle; it's basicall used for table-cell.in your example position is absolute this way u can do this

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

}