關於居中的問題，一直處於疑惑不解的狀態，知道的幾種方法好像也不是每一次都會起到作用，所以更加迷惑。主要是不清楚該
在什麼情況下採用哪種解決方法，所以，整理了一些方法，梳理一下思路，做乙個總結。
對於單行文字，可以設定它的行高等於它父容器的高度，這樣就實現了該文字的垂直居中，但是此方法只適用於單行文字。
（其實嚴格意義上來說，文字並不是絕對的垂直居中的，有那麼很小的幾畫素差距，只是我們看上去它是居中的；這裡的原因，就是文字的基線對齊的因素了，感興趣的朋友可以再深入地去了解一下，這裡我就不展開了）平時這樣用就可以了。
對於多行文字，設定line-height就無法實現了，在這裡有乙個方法比較好。
還記得剛學習html的時候，大家應該都記得**table吧，在每乙個單元格裡，如果我們想要讓裡邊的文字垂直居中的話，用到的屬性是 vertical-align：middle；所以在多行文字的情況下，就可以用的這個屬性。
前提條件是，我們需要給文字再加一層標籤，這裡在 box3 中，我用 span 標籤把文字包了起來。
給 span 的父級元素 div.box3 設定 display:table；給 span 設定display:table-cell;vertical-align:middle; 就可以了。
示例**如下：
documenttitle>
*div
.box2
.box3
.box3 span
style>
head>
這段文字想要居中！這段文字想要居中！這段文字想要居中！
div>
我們也想要居中！
我們也想要居中！
我們也想要居中！
div>
我們也想要居中！
我們也想要居中！
我們也想要居中！
span>
div>
body>
html>
推薦閱讀：
該屬性只能對、文字等行內元素(display為inline 或 inline-block 等)進行水平居中。
水平方向上：
無論是塊狀元素還是行內元素，都可以通過設定 margin 的 left 和 right 為 auto，來達到水平居中的效果，此方法只能進行水平的居中，且對浮動元素或絕對定位元素無效。常用的地方，在做居中布局的時候，對於乙個div設定margin：0 auto;來實現水平居中。
水平垂直方向：
對於乙個塊級元素，對它做絕對定位，然後設定它的 left right top bottom 都是0， margin 是 auto， 來實現水平垂直都居中，對於行內元素，無法設定，因為margin-top 和 margin-bottom 對於行內元素不起作用；
**如下：
documenttitle>
*.parent
.child
style>
head>
div>
div>
body>
html>
那麼，它是如何自適應的呢？
原因要考慮到絕對定位，因為絕對定位的布局取決於三個因素，乙個是元素的位置，乙個是元素的尺寸，乙個是元素的 margin 值。
沒有設定尺寸和 margin 的元素會自適應剩餘空間，位置固定則分配尺寸，尺寸固定便會分配 margin，都是自適應的。這樣就實現了絕對居中的效果。
ie7以下的渲染方式不同，渲染規則也不一樣，它不會讓定位元素去自適應。so~
推薦閱讀：
我們先來看一下**，**中多設定了乙個空的span標籤，為什麼要這樣，首先要搞清楚 vertical-align 這個屬性的特點，它是相對兄弟級(line-height)來定位的（這裡又涉及到了line-height和vertical-align的關係了，它們兩個也是基情滿滿的，如有需要，大家可以移步到張鑫旭大神部落格裡進行查閱），並且它僅對行內元素有效，所以，在要定位的元素後面多加乙個行內元素span來撐開父級的行高，以此來居中。
**如下：
documenttitle>
*.parent
.child
imgstyle>
head>
span>
div>
body>
html>
該方法只適用於那些已知寬度和高度的元素，並且絕對定位對頁面布局沒有影響的情況下。
第一步，絕對定位進行居中的原理是通過把這個絕對定位元素的 left 或 top 的屬性設定為 50%，這個時候並不是居中的，而是比居中的位置偏移了這個元素寬度或高度的一半距離；
第二步，已知寬高的元素，可以使用乙個負的 margin-left 或 margin-top 的值來把它拉回到居中的位置，這個負的 margin 值就是這個元素寬度或高度的一半。
未知寬高的元素，中可以使用transform:translate();這個屬性進行設定，這個位移屬性是相對於自身進行的，可以傳入兩個引數，分別是 x 和 y 方向上的偏移量，所以可以傳入 (-50%,-50%) 使得元素移動到中心位置實現水平垂直居中。
**如下：
documenttitle>
*.parent
.child
style>
head>
div>
div>
body>
html>
第二步效果：
**
元素垂直居中和水平居中
在此之前先要設定好高度和寬度 要是單行資料 垂直居中 1 可以用傳統的line height和height相等就可以 2 使用vertical align middle 此時該元素的display要設定為table cell，並且子元素必須是行級元素才可以。水平居中 1 text align cen...
水平居中和垂直居中
行內元素 為該行內元素的父元素新增設定text align center 塊級元素 為其自身設定margin auto樣式 子元素是行內元素 設定父元素的line height為其自身盒子的高度 子元素是塊級元素但子元素高度沒有設定 設定父元素是 display table cell vertica...
垂直居中和水平居中總結
container center 以上 可使塊級子元素水平垂直居中，為inline block的子元素只能垂直居中，若也想其水平垂直居中確保在父元素樣式中新增 text align center。關鍵必須設定其父元素固定寬高。即使有多個子元素也一樣可以垂直水平居中。當子元素都為行內元素 行內元素不能...