這個問題很常見，記錄下來將來好在面試之前複習複習！！
1、margin:0 auto
0是隨意的乙個值，第二個值必須設為auto，此方法只能水平居中，對浮動元素和絕對定位元素無效！只對塊狀元素有效。
2、text-align:center
只能對、按鈕、文字等行內元素（display為inline或inline-block）水平居中。此屬性是相對于父元素來說的。
3、line-height
把該屬性的值設定為文字父容器的高度，實現垂直居中。只適用於只有一行文字的情況。對塊狀和行內元素都使用。
4、使用**：適用ie8以上和火狐等現代瀏覽器，不適用於ie6、7.
把需要居中的元素放在標籤中，**預設對裡面的內容進行垂直居中，所以只要設定td的屬性align為center就可以實現水平居中（千萬注意，這裡的align是td的屬性，不是css屬性，千萬注意！！！），或者在css中設定text-align:center也行。
5、display:table-cell：適用ie8以上和火狐等現代瀏覽器，不適用於ie6、7.display:table-cell把該屬性的值設定為文字父容器的高度，實現垂直居中
屬性指讓標籤元素以**單元格的形式呈現,類似於td標籤。可以通過設定css屬性text-align:center來水平居中、vertical-align:middle來垂直居中，
這種方法只能在ie8+、谷歌、火狐等瀏覽器上使用。（vertical-align實現居中的性質非常混亂，記住這一種）
6、使用絕對定位居中父類：postion設定為relative，寬高已知；把該屬性的值設定為文字父容器的高度，實現垂直居中
子類：position設定為absolute,top和left相對於父類來移動的，此時的margin是相對於自己移動（聽說position:、設定為absolute，margin相對於自己，真假求證啊）寬高已知；
接下來的一切就變得很好理解了。
top：50%（這個是父類高度的50%，以下類推）
left:50%
margin-top:自身高的負一半
margin-left:自身寬的負一半
7、適用於ie9+以上，火狐等瀏覽器
其他的條件和6相同，然後：
top:0
bottom:0
left:0
right:0
margin:auto
聽說是這樣解釋的：top和bottom是沒有優先順序的，所以他們都要求是0的時候，瀏覽器只好讓他們居中，同理對left和right，不過margin:auto這句話是不可少的。
8、利用浮動和相對定位來實現水平居中（個人覺得此方法有點矯情，不推薦。）
條件：需要給居中的元素加乙個包裹元素；
需要居中的元素可以不設定寬度；
包裹元素進行浮動，並且設定為相對定位，把left設定為：50%（父類寬度的50%）；
需要居中的元素設定為相對定位，把left設定為：-50%（父類也就是包裹元素寬度的50%，包裹元素和需要居中的元素沒有設定寬度，所以他們寬度相等）
水平居中
水平居中
9、傳說中的方法，只適用於ie6、7父元素寬高已知，父元素設定font-size為父元素高度/1.14；
子元素不必知道寬高，必須是inline或者inline-block元素，且設定vertical-align:middle。
水平居中和垂直居中
行內元素 為該行內元素的父元素新增設定text align center 塊級元素 為其自身設定margin auto樣式 子元素是行內元素 設定父元素的line height為其自身盒子的高度 子元素是塊級元素但子元素高度沒有設定 設定父元素是 display table cell vertica...
垂直居中和水平居中總結
container center 以上 可使塊級子元素水平垂直居中，為inline block的子元素只能垂直居中，若也想其水平垂直居中確保在父元素樣式中新增 text align center。關鍵必須設定其父元素固定寬高。即使有多個子元素也一樣可以垂直水平居中。當子元素都為行內元素 行內元素不能...
CSS 垂直居中和水平居中
position relative width 500px height 500px background color ddd content background color 6699ff width 50 height 50 position absolute top 25 left 25 這兩...