CSS 水平居中
你不知道的那些事:
1、absolute：
相对最近的除了position：static之外的父元素偏移。默认：停留在父元素的content区域内！！
但是！！！其实absolute的活动区域是父元素的padding+content，并不仅限于父元素，只是起点在父元素内的左上角。设置left：0，top:0;就发现和默认的不一致了！！！（默认不等同于left：0；top:0;）
所以，当你发现下文中提到的left:50%;它是父元素padding+content长度的50%！！切记！！！
2、relative：
相对自己原来的位置偏移。活动范围是父元素的content区域，这句话说得不对，活动范围没人能拦得住它，并不仅限于父元素，但是当偏移量取值是百分比时，就是相对父元素的content取值了比如left：50%也就是父元素的content的50%。
3、fixed：
相对可视窗口偏移。活动范围是整个可视窗口，left：50%一般也就是浏览器可视窗口的50%啦。
##正文: ###1. 行内元素text-align:center 如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。 ```
2. 定宽块状元素
a. 设置“左右margin”值为“auto”来实现居中的。
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。
</div>
</body>
<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” 是可以随意设置的。
分析：
1、此方法居中只适用于占满一行的块状元素，不适用于inline-block。设置width只是content的宽度，加上padding、border和margin以后的整个块占满一行，因此设置margin auto可以使之居中。所以float浮动元素也不适用该方法。
2、absolute/fixed情况时，设置left:0,right:0;就可以把margin扯大啦！！（千万记得设置宽度，不然就不是把margin扯大而是把content扯大啦！）
3、IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值。
b. 设置元素为absolute/relative/fixed，（1）偏移量（left或者right）设置为50%，（2）margin设置为元素宽度一半乘以-1。
<body>
<div class="content"> aaaaaa aaaaaa a a a a a a a a </div>
</body>
<style>
body {
position: relative;
}
.content {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
}
</style>
注意此时absolute是在父元素的padding+content中居中，50%是父元素padding+content的50%；
relative是在父元素的content中居中，50%是父元素的content的50%；
fixed是视图居中，50%是可视窗口的50%，所以适用想要在浏览器居中的情况。
3. 不定宽块状元素方法
（1）加入 table标签+左右 margin 居中
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
（2）设置 display:inline或者inline-block +父元素text-align:center
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
</ul>
</div>
</body>
<style>
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline-block;
}
</style>
（3）设置 position:relative 和 left:50%
前文提到的position和移动50%的方案都是基于定宽的，因为如果不定宽，就会被扯大！！毁掉了我们的布局！
有些同学说我就是不想设定宽度，也不想加table，也不想把块状元素变成行内元素怎么办？
当当当！！
给自己添加一层父元素，让父元素紧紧的抱（包）住自己（给父元素设置float或者inline-block），使得父元素和自己一样宽，然后给父元素设置relative和 left:50%，让父亲带着自己飞，飞多远呢？答：飞父亲的父亲也就是爷爷的content的50％。然后子元素设置 position:relative 和 left: -50% 自己单飞，这个时候飞父亲的50%，其实也就是自己的50%，因为自己和父亲一样大。从而来实现水平居中。
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
</ul>
</div>
</body>
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
</style>
