1、行内元素的居中，
例如想设置文本、图片等行内元素水平居中时，可以通过父元素设置 text-align:center 来实现，即给需要设置的元素添加一个父元素的容器，然后设置这个父元素（容器）的text-align属性即可。方法简单，原理也很容易理解，需要注意的是只能针对行内元素；
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1{
text-align:center;
}
</style>
</head>
<body>
<div id="box1">
<span>想让行内元素居中显示</span>
</div>
</body>
</html> -->
效果图：
2、宽度一定的块状元素居中。
因为是块状元素，所以就没办法运用第一种方法的text-align属性了，这次我们是通过对需要设置的元素的“左右margin”值为“auto”来实现，margin的上下值可以根据需求随意设置，但是左右一定要为”auto”！需要注意的是，在设置 margin:20px auto 之前，一定要先设置width的值，即最后的设置样例为：
div { border:2px solid red; width:100px; margin:20px auto; }
即2个像素宽的红色实体边框，整个div元素的宽度为100像素，上下距离浏览器的空白边距为20像素，左右根据内容自动调整，这样就实现了块状元素的居中显示，别忘了，要先设置width：宽度值！宽度值！宽度值！这种方法优点是简单易懂，兼容性也强，但是扩展性比较差，无法自适应未知宽度的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nj{
width:600px;
margin: 0 auto;
border:1px solid black;
}
</style>
</head>
<body>
<div id="box2">
<div class="nj">想让行内元素居中显示</div>
</div>
</body>
</html>
效果图：
3、宽度不确定块状元素的居中显示。
这里大概也可以分为三个方法：
1）运用table标签；2）设置display:inline；3）设置position:relative和left:50%。
3.1、运用table标签。第一步：在需要设置的元素外面加上一个table标签（包括，是不是有点类似设置行内元素时添加一个父元素的容器呢？）。第二步：给这个table设置”左右margin居中”（这里又和设置定宽块状元素的方法一样了）。
1）运用table标签；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {margin: 0 auto;}
</style>
</head>
<body>
<table>
<tbody>
<tr><td>
<a href="#">Prev</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">Next</a>
</td></tr>
</tbody>
</table>
</body>
</html>
总结：就是将需要进行居中的元素，用一个大表格将其围起来（而且这个表格只有这一个单元格哦），然后设置表格的属性（如第2条方法）居中就行。不过缺点是加了不少的无用标签，代码看起来比较臃肿。
3.2）、改变块级元素的display为inline类型，然后设置text-align:center来实现居中效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {text-align: center;}
.container li {display: inline;}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">fewe</a></li>
<li><a href="#">fewa</a></li>
<li><a href="#">d</a></li>
<li><a href="#">3</a></li>
<li><a href="#">dwedfe</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</html>
总结：首先将需要居中的块级元素的display属性设置为inline，这样的目的是先把块级元素变为行内元素，可以在一行内显示，然后将这些元素的父级元素text-align设置为：center即可。大概原理就是：块级->行内->居中(参照第1条方法)，不过缺点也很明显，块级元素的一些特点没有了，例如高度、宽度设置等。
3.3）、运用float属性，主要的思想也就是将所需要居中的元素先float到左边，这样就能在一行内显示，然后将整个列表float到父元素左边，然后设置left来设置居中。怎么设置呢？先设置父元素：left:50%，这样整个父元素就往右便宜50%，然后设置列表：right:50%，这样列表的东西再往左走父元素的50%，这样就达到了居中的目的。
代码样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
float:left;
position: relative;
left: 50%;
}
.container ul {
/*float: left;*/
position: relative;
right: 50%;
padding:0;
margin: 0;
}
.container li {
/*float: left;*/
position: relative;
display: inline;
}
.container a {
padding: 0 20px;
}
</style>
</head>
<div class="container">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</html>
总结：基本思想也就是将父元素（容器）先往右偏移父容器宽度的50%，然后再将列表的元素向左相对偏移50%，就可以得到居中的效果。（这个方法不理解的话可以看下边W3C博客，那里边介绍的详细，具体链接见下边叙述。）不过我当时在测试这一点的时候，有个问题，就是ul的padding和margin没有清零，然后导致一直不太居中，后来清零就好了。
