水平居中：
1，對於行內元素直接通過text-align:center設置即可
2，對於寬度固定的DIV居中，設置margin:0 auto;就可以，表示讓瀏覽器自動計算左右margin來居中
3，對於寬度不固定的，比如分頁的頁碼，由於不知道會有多少頁，所以不能設置固定寬度，有三種方法來設置
a,利用table來設置
<pre style="font-family: Menlo; font-size: 9pt; background-color: rgb(255, 255, 255);"><span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
margin: 0 auto;
}
ul{
list-style: none;
}
li{
float: left;
}
li a{
display: block;
margin-right: 8px;
}
</style>
</head>
<body>
<div>
<table>
<tbody>
<tr><td>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</td></tr>
</tbody>
</table>
</div>
</body>
</html>通過設置table的居中，來達到裏面單元格居中的效果。缺點是會引入一些無語義的標籤
b,通過設置div中元素爲inline或inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
text-align:center;
}
.container ul{
list-style:none;
}
.container li{
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>c,通過給父元素設置 float，然後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:-50% 來實現水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
position:relative;
left:-50%;
}
.container li{float:left;display:block;margin-right:8px;}
</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>垂直居中：
1，單行文本的垂直居中設置父元素的height與line-height一樣就可以
2，多行文本，圖片，塊狀元素的垂直居中有二種方法
a,使用插入 table，css 中有一個用於豎直居中的屬性 vertical-align，但這個樣式只有在父元素爲 td 或 th 時，纔會生效。所以需要插入table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table td{height:500px;background:#ccc}
</style>
</head>
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
</html>b，利用displa:table-cell屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
</head>
<body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
</body>
</html>這種方法的好處是不用添加多餘的無意義的標籤，但不兼容 IE6、7