CSS居中主要分为两类
水平居中 （水平居中分为行内元素居中和块状元素居中 块状元素居中又分为 定宽元素 和 不定宽元素 居中）
垂直居中
一、水平居中
- 行内元素 居中
text-align:center;
ps:适用于行内元素或者是块状元素 display被设置为inline的元素，可以在父元素加text-align:center;，但是子元素被float影响的元素不能使用 - 块状元素居中
定宽：margin:0 auto;
不定宽：
方法一：display:table;margin:0 auto;
方法二：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用text-align:center来实现居中效果。
方法三：通过给父元素设置 float，然后给父元素设置position:relative和left:50%，子元素设置position:relative和left: -50%来实现水平居中
二、垂直居中
- 父元素高度确定的单行文本的垂直居中把父元素的 height 和 line-height 设置为一直即可实现垂直居中
height:60px;line-height:60px; - 父元素高度确定的多行文本垂直居中
方法一：设置父元素display:table; vertical-align:middle;
方法二：display:table-cell; /*IE8以上及Chrome、Firefox*/ vertical-align:middle; /*IE8以上及Chrome、Firefox*/
通过绝对定位：
首先给父元素写上positon:relative，这么做是为了给子元素打上position:absolute的时候不会被定位到外太空去。接下去，写上子元素的height和width，这个似乎是必须的，某些浏览器在解析的时候如果没有这2个值的话会出现意想不到的错位。接着就是整个方法的核心，给子元素再打上top:50%;left:50%以及margin-top:一半`的height值的的负数;margin- left:一半的weight值的负数。
{
width:100px;
height:80px;
position:absolute;
top:50%;
left:50%;
margin-left:50px;
margin-top:40px
}
