CSS：display:table

使用display:table 垂直居中需要结合display:table-cell; 和vertical-align:middle;

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style type="text/css">
    .out{
    border:1px solid #000;
    height:300px;
    display:table;
    }
    .inner{display:table-cell;
    vertical-align:middle;
    }
    </style>
</head>

<body>    
<div class="out">
<div class="inner">
sdfsfsdfsfsfsfsfs
</div>
</div>

</body>
</html>

 

效果就类似于表格里面的单元格居中

<table width="100%%" border="1">
  <tr>
    <th height="276" valign="middle" scope="col">ssss</th>
  </tr>
</table>

 

posted @ 2015-08-27 15:18  tinyphp  Views(253)  Comments(0)  Edit  收藏  举报