一、水平居中設置
在實際工作中常會遇到需要設置水平居中的場景，比如爲了美觀，文章的標題一般都是水平居中顯示的。
我們將其分爲兩種情況：行內元素和塊狀元素，塊狀元素裏面又分爲定寬塊狀元素，以及不定寬塊狀元素。
1.行內元素
如果被設置元素爲文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的。(父元素和子元素：如下面的html代碼中，div是“我想要在父容器中水平居中顯示”這個文本的父元素。反之這個文本是div的子元素 )
html代碼：
<body>
<div class="txtCenter">我想要在父容器中水平居中顯示。</div>
</body>
css代碼：
<style>
.txtCenter{
text-align:center;
}
</style>
2.定寬塊狀元素
當被設置元素爲塊狀元素時用 text-allign：center 就不起作用了，這時分爲兩種情況：定寬塊狀元素和不定寬塊狀元素。這一部分我們來講定寬塊狀元素。(定寬塊狀元素：塊狀元素的寬度width爲固定值。)
當被設置元素爲塊狀元素時用 text-allign：center 就不起作用了，這時分爲兩種情況：定寬塊狀元素和不定寬塊狀元素。這一部分我們來講定寬塊狀元素。(定寬塊狀元素：塊狀元素的寬度width爲固定值。)滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值爲“auto”來實現居中的。我們來看個例子就是設置 div 這個塊狀元素水平居中：當被設置元素爲塊狀元素時用 text-allign：center 就不起作用了，這時分爲兩種情況：定寬塊狀元素和不定寬塊狀元素。這一部分我們來講定寬塊狀元素。(定寬塊狀元素：塊狀元素的寬度width爲固定值。)
html代碼：
<body>
<div>我是定寬塊狀元素，我要水平居中顯示。</div>
</body>
css代碼：
<style>
div{
border:1px solid red;/*爲了顯示居中效果明顯爲 div 設置了邊框*/
width:200px;/*定寬*/
margin:20px auto;/* margin-left 與 margin-right 設置爲 auto */
}
</style>
也可以寫成：
margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin” 是可以隨意設置的。
3.不定寬塊狀元素
在實際工作中我們會遇到需要爲“不定寬度的塊狀元素”設置居中，比如網頁上的分頁導航，因爲分頁的數量是不確定的，所以我們不能通過設置寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
1.加入table標籤
2.設置display: inline方法：與第一種類似，顯示類型設爲行內元素，進行不定寬元素的屬性設置。
3.設置position:relative和left:50%：利用相對定位的方式，將元素向左偏移50%，即達到居中的目的。
第一種方法——加入table標籤：
爲什麼選擇方法一加入table標籤? 是利用table標籤的長度自適應性，即不定義其長度也不默認父元素body的長度（table其長度根據其內文本長度決定），因此可以看做一個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
第一步：爲需要設置的居中的元素外面加入一個 table 標籤 ( 包括 <tbody>、<tr>、<td> )。
第二步：爲這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。
html代碼：
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
css代碼：
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
第二種方法——設置display: inline：
改變塊級元素的 display 爲 inline 類型（設置爲行內元素顯示），然後使用 text-align:center 來實現居中效果。如下例子：
html代碼：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代碼：
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（設置li文本之間的間隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
這種方法相比第一種方法的優勢是不用增加無語義標籤，但也存在着一些問題：它將塊狀元素的 display 類型改爲 inline，變成了行內元素，所以少了一些功能，比如設定長度值。
第三種方法——設置浮動和相對定位來實現：
通過給父類設置float，然後給元素設置position:relative和left:50%，子元素設置position:relative和left:-50%，來實現水平居中。
我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分爲兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。
html代碼：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代碼：
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。
二、垂直居中設置
1.父元素高度確定的單行文本
在實際工作中也會遇到需要設置垂直居中的場景，比如好多報紙的文章標題在左右一側時，常常會設置爲垂直居中，爲了用戶體驗性好。這裏我們又得分兩種情況：父元素高度確定的單行文本，以及父元素高度確定的多行文本。
本節我們先來講在父元素高度確定的單行文本, 怎麼設置它爲垂直居中。
父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和line-height高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的基線間的距離 )。
這種文字行高與塊高一致帶來了一個弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。
line-height 與 font-size 的計算值之差，在 CSS 中成爲“行間距”。分爲兩半，分別加到一個文本行內容的頂部和底部。html代碼：
html代碼：
<div class="container">
hello world!
</div>
css代碼：
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
2.父元素高度確定的多行文本
父元素高度確定的多行文本、圖片等的豎直居中的方法有兩種：
方法一：使用插入table (包括tbody、tr、td)標籤，同時設置 vertical-align：middle。
css 中有一個用於豎直居中的屬性 vertical-align，在父元素設置此樣式時，會對inline-block類型的子元素都有用。
html代碼：
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代碼：
table td{height:500px;background:#ccc}
因爲 td 標籤默認情況下就默認設置了 vertical-align 爲 middle，所以我們不需要顯式地設置了。
方法二：在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 爲 table-cell（設置爲表格單元顯示），激活 vertical-align 屬性，但注意 IE6、7 並不支持這個樣式，這種方法兼容性比較差，只是提供大家學習參考。
html代碼：
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
css代碼：
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
這種方法的好處是不用添加多餘的無意義的標籤，但缺點也很明顯，它的兼容性不是很好，不兼容 IE6、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質。
三、隱性改變display類型
只要html代碼中出現以下兩句之一
1.position:absolute
2.float : left 或 float:right
元素的display顯示類型就會自動變爲以 display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的 width 和 height 了，且默認寬度不佔滿父元素。
如下面的代碼，a 標籤是行內元素，所以設置它的 width 是 沒有效果的，但是設置爲 position:absolute 以後，就可以了。
html代碼：
<div class="container">
<a href="#" title="">單擊</a>
</div>
css代碼：
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
<!--此內容爲學習筆記，包括課程中的知識點和我自己的理解，轉載請註明-->