元素的居中設置
水平居中設置－行內元素
我們實際的工作中常會遇到需要設置水平居中的場景， 比如文章的標題一般都是要求水平居中顯示的。
設置水平居中， 我們需要分爲兩種情況： 行內元素還是塊狀元素的水平居中， 塊狀元素裏面又分爲定寬塊狀元素和不定寬塊狀元素。
如果設置的元素爲文本、圖片等行內元素時，水平居中是通過給父元素設置text-align:center 來實現的。如下代碼：
html代碼：
<span style="font-size:12px;"><body>
<div class="textCenter"> 設置水平居中， 我們需要分爲兩種情況： 行內元素還是塊狀元素的水平居中， 塊狀元素裏面又分爲定寬塊狀元素和不定寬塊狀元素。</div>
</body></span>css代碼：
<span style="font-size:12px;"><style>
.textCenter{
text-align:center;
}
</style></span>水平居中設置－定寬塊狀元素
當被設置的元素爲塊狀元素時用 text-align：center 就不再會起作用了， 這時的設置就分爲 定寬塊狀元素和不定寬塊狀元素的設置。
滿足定寬和塊狀兩個條件的元素是可以通過設置左右margin值爲auto來實現居中的。 如下例子就是設置div這個塊狀元素水平居中：
html代碼：
<span style="font-size:12px;"><body>
<div>設置水平居中， 我們需要分爲兩種情況： 行內元素還是塊狀元素的水平居中， 塊狀元素裏面又分爲定寬塊狀元素和不定寬塊狀元素。</div>
</body></span>css代碼：
<span style="font-size:12px;"><style>
div{
border: 1px solid red;
width:200px;/*定寬*/
margin: 20px auto;/*margin-left與margin-right設置爲auto*/
}
<style></span>也可以寫成：
<span style="font-size:12px;">margin-left:auto;
margin-right:auto;</span>注意：元素的上下margin是可以隨意設置的
水平居中－不定寬塊狀元素方法（一）
在實際工作中我們會遇到需要爲 不定寬塊狀元素 設置居中， 比如網頁上的分頁導航，因爲分頁的數量是不確定的， 所以不能通過設置寬度來限制它的彈性。（不定寬塊狀元素的寬度width是不確定的）
不確定寬度的塊狀元素居中顯示有以下三種方法：
1.加入tabel標籤
2.設置diplay：inline方法， 與第一種類似，顯示類型爲行內元素， 進行不定寬元素的屬性設置
3.設置position：relative和left：50%：利用相對定位的方式，將元素向左偏移50%， 即可達到居中的目的
加入tabel標籤來輔助設置不定寬塊狀元素居中顯示， 是利用table標籤的長度自適應－－即不定義其長度也不默認父元素body的長度（table長度根據其內容的文本長度決定），因此可以看作一個定寬塊狀元素， 然後利用定寬塊狀居中的margin設置方法，使其水平居中。
加入table標籤設置水平居中需要按照以下步驟進行設置：
1.爲需要設置居中的元素外面加一個table標籤（包括<tbody>、<tr>、<td>）
2.爲這個table設置左右的margin爲居中
舉例如下
代碼如下：
<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
table{
border:1px solid red;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>
<ul>
<li>第一行文本</li>
<li>第二行文本</li>
<li>第三行文本</li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html></span>
水平居中－不定寬塊狀元素方法（二）
改變元素的display類型爲行內元素，利用其屬性直接設置。， 改變塊狀元素的display爲inline類型， 使用text-align:center來實現居中效果。
代碼如下：
<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.container{
text-align: center;
}
.contaiber ul{
list-style: none;
margin: 0;
padding: 0;
display: inline;
}
.container li{
margin-right: 8px;
display: inline;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>第一行文本</li>
<li>第二行文本</li>
<li>第三行文本</li>
</ul>
</div>
</body>
</html></span>這種方法相比第一種方法的優勢是不用增加無語義標籤， 但也存在着一些問題： 它將塊狀元素的display類型改爲inline， 變成了行內元素， 所以缺少了塊狀元素的某些功能， 比如設定長度值。
水平居中－不定寬塊狀元素方法（三）
代碼如下：
<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.container{
float: left;
position: relative;
left: 50%;
}
.contaiber ul{
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: -50%;
}
.container li{
float: left;
margin-right: 8px;
display: inline;
}
</style>
</head>
<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>
</html></span>垂直居中－ 父元素高度確定的單行文本
我們在實際開發的過程中，也會遇到許多需要垂直顯示的場景， 比如報紙的文章標題在左右一側時， 常常會設置爲垂直居中。
垂直居中顯示也分兩種情況：父元素高度確定的單行文本，以及父元素高度確定的多行文本。
父元素確定的單行文本的豎直居中的方法是通過設置父元素的height 和line-height高度一致來實現的。（height 該元素的高度， line-height 行高，指在文本中， 行與行之間的基線間的距離）。
line-height與font-size的計算值之差， 在css中稱爲行間距， 分爲兩半， 分別加到一個文本行內容的頂部和底部。
這種文字行高與塊高一致有一個很大的弊端： 當文字內容的長度大於塊的寬時， 就有內容脫離了塊。
代碼如下：
<span style="font-size:12px;"><div class="container">
hello world!
</div>
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style></span>父元素確定的多行文本、圖片等的豎直居中的方法有兩種：
方法一：使用插入table（包括tbody、tr、td）標籤， 同時設置vertical-align： middle
css中又一個用於豎直居中的屬性 vertical-align， 在父元素設置此樣式時， 會對inline-block類型的子元素都有作用。
如下代碼：
<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.wrap{
height: 300px;
background: #ccc;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td class="wrap">
<div>
<p>垂直居中顯示的文本信息</p>
<p>垂直居中顯示的文本信息</p>
<p>垂直居中顯示的文本信息</p>
<p>垂直居中顯示的文本信息</p>
<p>垂直居中顯示的文本信息</p>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html></span>垂直居中－父元素高度確定的多行文本（方法二）
在chrome、firefox及IE8以上的瀏覽器下可以設置塊級元素的 display爲table-cell（表格單元）, 激活vertical-align屬性， 但注意IE6、IE7並不支持這個樣式，兼容性較差。
代碼如下：
<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.container{
height: 300px;
background: #ccc;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div>
<p>垂直居中顯示的文本信息</p>
<p>垂直居中顯示的文本信息</p>
<p>垂直居中顯示的文本信息</p>
<p>垂直居中顯示的文本信息</p>
<p>垂直居中顯示的文本信息</p>
</div>
</div>
</body>
</html></span>這種方法的好處就是不用添加多餘的無語義的標籤， 但缺點也是很明顯的， 兼容性不好。
隱性改變display類型
在html中， 只要代碼中出現 position:absolute 或者 float:left (float:right)之一， 元素的display顯示類型就會自動變爲以 display: inline-block（塊狀元素）的方式顯示， 當然就可以設置元素的width和height了， 且默認寬度不沾滿父元素。
如下代碼：
<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.container a{
position: absolute;
width: 200px;
background: #ccc;
}
</style>
</head>
<body>
<div class="container">
<a href="#" title="點擊菜單"></a>
</div>
</body>
</html></span>