一、水平居中設置——行內元素
如果設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置text-align:center來實現的
二、水平居中設置
——定寬塊狀元素
#當被設置元素為塊狀元素時，使用text-align:center就不起作用，此時分兩種情況：定寬塊狀元素與不定寬塊狀元素。
#定寬塊狀元素：塊狀元素的寬度width為固定值
#滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin值”為“auto”來實現居中
#塊級元素的居中有兩個條件，1:必須有寬度，2:左右margin為auto
margin:10px 5px; 表示對象與父容器的上下距離值都是10px，與左右的距離值都是5px。
margin:0 auto; 表示上下的距離值是0，而左右就是自動適應，也就是我們常說的自動居中。
margin:auto; 表示上下左右都自動適應。
未設置前：
設置后
——不定寬塊狀元素
不定寬塊狀元素：塊狀元素的寬度width不固定。
不定寬度的塊狀元素有三種方法居中：
1、加入table標簽
（利用table標簽的長度自適應性，即不定義其長度也不默認父元素body的長度，table其長度根據其內文本長度決定，因此可以看做一個定寬塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。）
2、設置display:line方法：與第一種類似，顯示類型設為行內元素，使用text-align:center來實現居中效果。
3、設置position:relative和left:50%:利用相對定位的方式，將元素向左偏移50%，即達到居中的目的。
理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。
三、垂直居中
兩種情況：父元素高度確定的單行文本，父元素高度確定的多行文本。
#父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的height和line-height高度一致來實現。（height：元素的高度，line-height：行高、行間距，指在文本中，行與行之間的基線間的距離）
#父元素高度確定的多行文本
方法一：
使用插入table(包括tbody、tr、td)標簽，同時設置豎直居中的屬性vertical-align:middle，在父元素設置此樣式時，會對inline-block類型的子元素都有用
方法二：
在chrom、firefox、IE8以上的瀏覽器可以設置塊級元素的display:table-tell（設置為表格單元），激活vertical-align屬性，本方法兼容性較差
四、隱藏改變display類型
當元素（不論之前是什么類型元素，display:none除外）設置以下兩個句子之一：
1、position:absolute
2、float:left或float:right
元素的display顯示類型就會自動變為以display:inline-block（塊狀元素）的方式顯示，然后就可以設置元素的width和height，且默認寬度不占滿父元素
