在網頁中，元素有三種佈局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）
模型有三種形式：
1、絕對定位(position: absolute)：
相對於父塊而言，如果沒有就是相對body元素
定位元素加入absolute
2、相對定位(position: relative)
相對於元素之前所在的位置而言
參照定位必須加入relative
3、固定定位(position: fixed)
位置是固定的
水平居中設置-行內元素
text-align:center水平居中設置-定寬塊狀元素 （設置width屬性值）
margin:20px auto;
/* margin-left 與 margin-right 設置爲 auto */不定寬度（比如分頁）的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
- 加入 table 標籤,設置margin左右爲auto屬性
- 設置 display: inline 方法：與第一種類似，顯示類型設爲行內元素，然後使用 text-align:center 來實現居中效果
- 設置 position:relative 和 left:50%：利用 相對定位 的方式，將元素向左偏移 50% ，即達到居中的目的
垂直居中-父元素高度確定的單行文本
是通過設置父元素的 height 和 line-height 高度一致來實現的
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
<div class="container">
hi,imooc!
</div>垂直居中-父元素高度確定的多行文本（方法一）
<style>
table td{
height:500px;
background:#ccc;
}
</style>
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>說明：
因爲 td 標籤默認情況下就默認設置了 vertical-align 爲 middle，
垂直居中-父元素高度確定的多行文本（方法二）
在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 爲 table-cell（設置爲表格單元顯示），激活 vertical-align 屬性，但注意 IE6、7 並不支持這個樣式, 兼容性比較差。
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>隱性改變display類型
有一個有趣的現象就是當爲元素（不論之前是什麼類型元素，display:none 除外）設置以下 2 個句之一：
position : absolute
float : left 或 float:right
簡單來說，只要html代碼中出現以上兩句之一，元素的display顯示類型就會自動變爲以 display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的 width 和 height 了，且默認寬度不佔滿父元素。
