1.水平居中
1.1 margin:auto
把要居中的元素的margin-left和margin-right都设为auto，对浮动元素或绝对定位元素无效
1.2 text-align:center
只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中(对ie6.7对任何元素居中)
2.垂直居中
2.1 line-height:
把单行文字的line-height设为文字父容器的高度，适用于只有一行文字的情况
3.使用表格
3.1 用 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以处理它里面内容的水平和垂直居中,而且表格默认的就会对它里面的内容进行 垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可 以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。
3.2 display:table-cell 来居中
通过display:table-cell 来把它模拟成一个表格单元格，就可以利用表格那很方便的居中特性了
<div style="display:table-cell;vertical:middle;text-align:center;width:200px;height:200px; border:1px solid red;">
<div style="width:50px;height:50px;background:blue;display:inline-block;"></div>
</div>
4.使用绝对定位和margin负值实现居中
4.1 在已知高度和宽度的元素
绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半 的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。
<head>
<style>
body{margin:0;pdding:0;}
.parent{width:200px;height:200px;border:1px solid red;position:relative}
.child{width:100px;height:100px;background:blue;position:absolute;
top:50%;
left:50%;
margin-left:-50px; //元素宽度一半
margin-top:-50px； //元素宽度一半 }</style></head> <body> <div class=parent> <div class=child></div> </div></body>
4.2也是在知道宽度和高度的元素中
这里如果不定义元素的宽和高的话，那么他的宽就会由left,right的值来决定，高会由top,bottom的值来决定，所以必须要设置元素的高和宽。同时如果改变left，right , top , bottom的值还能让元素向某个方向偏移，大家可以自己去尝试。
<head>
<style>
body{margin:0;padding:0}
.parent{width:200px;height:200px;border:1px solid red;position:relative} .child{width:100px;height:100px;background:blue;position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
5.使用浮动配合相对定位来实现居中
关于浮动元素如何设置居中，，不需要知道需要居中的元素的宽度
浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素 再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用 知道自身的实际宽度是多少。
这种使用浮动配合相对定位来居中的方法，优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素。
<head>
<style>
body{margin:0;pdding:0}
.parent{border:1px solid red;height:200px;width:200px;} .wraper{float:left;position:relative;left:50%;clear:both;}
.child{border:1px solid blue;position:relative;left:-50%;white-space:nowrap;} //left:-50%;或者 right:50%
</style>
</head>
<body>
<div class="parent">
<div class="wraper">
<div class="child">水平居中了</div>
</div>
<div class="wraper" style="margin-top:20px">
<div class="child">宽度不同的</div>
</div>
<div class="wraper"style="margin-top:20px">
<div class="child">是的哈</div>
</div>
</div>
</body>