如何在中间垂直制作我的div？

Question

可能重复:
全屏垂直居中的HTML页面的方法？

请告诉我如何让我的div垂直显示在页面中间.

Answer 1

你可以尝试这个.

在你的HTML中:

<div id="tbl">
 <div id="tbl_cell">
   <div id="content"></div>
 </div>
</div>

在你的CSS中:

html, body, #tbl {
 margin: 0;
 padding: 0;
 height: 100%;
 width: 100%;
}

#tbl {
 display: table;
}

#tbl_cell {
 display: table-cell;
 margin: 0;
 padding: 0;

 text-align: center;
 vertical-align: middle;
}

#content {
 border: 1px solid red;
 background-color: #000;
 width: 100px;
 height: 100px;
 margin: auto;
}