垂直居中：父层高宽不固定，子层高宽固定
//<body><div class="app">*********</div></body>
/* Portrait layout (default) */
.app {
background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */ position:absolute; /* position in the center of the screen */ left:50%; top:50%; height:50px; /* text area height */ width:225px; /* text area width */ text-align:center; padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */ margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */ /* offset horizontal: half of text area width */ } /* Landscape layout (with min-width) */ screen and (min-aspect-ratio: 1/1) and (min-width:400px) { .app { background-position:left center; padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */ margin:-90px 0px 0px -198px; /* offset vertical: half of image height */ /* offset horizontal: half of image width and text area width */ }}
垂直居中：父层高宽固定，子层高度固定
//<a href="product.html"><b>*********</b></a>
a{
display:table-cell; position: relative; z-index: 1; color:#ffffff; vertical-align:middle; font-size:160px; height:158px; width: 158px; } a b{ display:inline-block; vertical-align:middle; font-size:14px; line-height: 30px; padding: 0 10px; cursor: pointer; }
如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？
#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}#test p{*position:absolute;*top:50%;*left:50%;margin:0;}#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}