/* top:50% margin-top:-35px */
.wrap{
height: 200px;
width: 200px;
border: 4px solid #BBBBBB;
position: relative;
}
.inner{
position:absolute;
height: 70px;
width: 120px;
background-color: #FFBFBF;
top:50%;
margin-top:-35px;
}
<div class="wrap">
<div class="inner"></div>
</div>
//==============================================================================//==============================================================================
/* td{vertical-align: middle;}*/
td{
vertical-align: middle;
border: 4px solid #BBBBBB;
height: 200px;
width: 200px;
}
.tddiv{
height: 70px;
width: 120px;
background-color: #FFBFBF;
}
<table>
<tr>
<td><div class="tddiv"></div></td>
</tr>
</table>
//==============================================================================
//==============================================================================
/*div { display:table; }
p{ display:table-cell; vertical-align:middle; }
*/
.wrap2{
display:table;
height: 200px;
width: 200px;
border: 4px solid #BBBBBB;
}
.inner2{
display:table-cell;
vertical-align: middle;
}
<div class="wrap2">
<p class="inner2">content</p>
</div>
//==============================================================================
//==============================================================================
/*多一层。内 .hack 层 top:50%; 再让 .cnt 层相对自身向上提50%*/
.wrap3{
height: 200px;
width: 200px;
border: 4px solid #BBBBBB;
position: relative;
}
.hack{
position:absolute;
height: 70px;
width: 120px;
background-color: #FFBFBF;
top:50%;
}
.inner3{
height: 70px;
width: 120px;
background-color: #82E0FF;
position: absolute;
top:-50%;
}
<div class="wrap3">
<div class="hack">
<div class="inner3"></div>
</div>
</div>
//参考自:http://sofish.de/1909
08-30
08-30
08-30
08-30