CSS的水平居中与垂直居中
水平居中：
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>这种方法优点是没有引入一些标签，但设置了li为inline后不可设置宽高了，设置为inline-block可以
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>这种方式为什么要设置.container的float属性，我还不能理解～～
垂直居中：
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>因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了
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