水平居中:text-align:center;
垂直居中:display:table-cell;vertical-align:middle;
css代码:
.tableDiv{
display:table;
}
.tableCellDiv{
display:table-cell;vertical-align:middle;text-align:center;
}
html代码片段:
<div id="imgLayout" style="height: 180px;display:none;">
<div style="float:left;">
<%--图位二--%>
<div class="tableDiv" style="height: 86px;width: 200px;border:1px solid black;">
<div class="tableCellDiv" >图位一<br/>530×230</div>
</div>
<div style="width: 202px;">
<%--图位二--%>
<div class="tableDiv" style="height: 86px;width: 99px;border:1px solid black;float:left;">
<div class="tableCellDiv" >图位二<br/>256×230</div>
</div>
<%--图位三--%>
<div class="tableDiv" style="height: 86px;width: 99px;border:1px solid black;float:left;">
<div class="tableCellDiv" >图位三<br/>256×230</div>
</div>
</div>
</div>
<div style="float:left;">
<%--图位四--%>
<div class="tableDiv" style="height: 86px;width: 200px;border:1px solid black;">
<div class="tableCellDiv" >图位四<br/>410×230</div>
</div>
<%--图位五--%>
<div class="tableDiv" style="height: 86px;width: 200px;border:1px solid black;">
<div class="tableCellDiv" >图位五<br/>410×230</div>
</div>
</div>
<div style="float:left;">
<%--图位六--%>
<div class="tableDiv" style="height: 174px;width: 97px;border:1px solid black;">
<div class="tableCellDiv" >图位六<br/>260×460</div>
</div>
</div>
</div>