CSS之居中问题

CSS居中主要分为两类

1. 水平居中 （水平居中分为行内元素居中和块状元素居中 块状元素居中又分为 定宽元素 和 不定宽元素 居中）

2. 垂直居中

一、水平居中

1. 行内元素 居中
   text-align:center;
   ps:适用于行内元素或者是块状元素 display被设置为inline的元素，可以在父元素加text-align:center;，但是子元素被float影响的元素不能使用
2. 块状元素居中
   定宽：margin:0 auto;
   不定宽：
   方法一： display:table;margin:0 auto;
   方法二：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center来实现居中效果。
   方法三：通过给父元素设置 float，然后给父元素设置position:relative和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中

二、垂直居中

1. 父元素高度确定的单行文本的垂直居中把父元素的 height 和 line-height 设置为一直即可实现垂直居中
   height:60px;line-height:60px;
2. 父元素高度确定的多行文本垂直居中
   方法一：设置父元素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
}