CSS 上的 DIV 置中.

CSS 上的 DIV 置中.

前置工作.

[css]html, body {
margin:0px;
padding:0px;
border:none;
height:100%; /* 令 body 擁有 height 參數 */
}
.table{
#position: relative;
/*
position: absolute;
width: 100%;
*/
/* You may not want object as big as it’s window */
height: 100%;
display: table;
overflow: hidden;
}
.center{
text-align: center;
}
.middle{
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.middle-fix{
#position: relative;
#top: -50%
}
[/css]

使用方式:

[html]
<div class="table" style="position: absolute; width: 100%;">
<div class="center middle">
<div class="middle-fix">
我在畫面正中間.</div>
</div>
</div>
[/html]

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料