元素水平居中和垂直居中的方式
關於居中的問題，一直處於疑惑不解的狀態，知道的幾種方法好像也不是每一次都會起到作用，所以更加迷惑。主要是不清楚該
在什么情況下采用哪種解決方法，所以，整理了一些方法，梳理一下思路，做一個總結。
1. line-height使單行文本垂直居中
對於單行文本，可以設置它的行高等於它父容器的高度，這樣就實現了該文本的垂直居中，但是此方法只適用於單行文本。
（其實嚴格意義上來說，文字並不是絕對的垂直居中的，有那么很小的幾像素差距，只是我們看上去它是居中的；這里的原因，就是文本的基線對齊的因素了，感興趣的朋友可以再深入地去了解一下，這里我就不展開了）平時這樣用就可以了。
對於多行文本，設置line-height就無法實現了，在這里有一個方法比較好。
還記得剛學習html的時候，大家應該都記得表格table吧，在每一個單元格里，如果我們想要讓里邊的文本垂直居中的話，用到的屬性是 vertical-align：middle；所以在多行文本的情況下，就可以用的這個屬性。
前提條件是，我們需要給文本再加一層標簽，這里在 box3 中，我用 span 標簽把文字包了起來。
給 span 的父級元素 div.box3 設置 display:table；給 span 設置display:table-cell;vertical-align:middle; 就可以了。
這里我沒有考慮IE低版本兼容性問題，可以參考下方的推薦閱讀，做進一步了解。
示例代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} div{ margin: 50px auto; width: 600px; height: 100px; line-height: 100px; font-size: 20px; font-weight: bold; color: #ff1493; background-color: #fff; box-shadow: 0 0 5px #000; border-radius: 10px; } .box2{ color: #800000; } .box3{ display: table; margin-top: 200px; } .box3 span{ display: table-cell; vertical-align: middle; line-height: 20px; } </style> </head> <body> <div class="box1"> 這段文字想要居中！這段文字想要居中！這段文字想要居中！ </div> <div class="box2"> 我們也想要居中！<br> 我們也想要居中！<br> 我們也想要居中！ </div> <div class="box3"> <span> 我們也想要居中！<br> 我們也想要居中！<br> 我們也想要居中！ </span> </div> </body> </html>效果如下：
推薦閱讀：
http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html#zhangxinxu
http://www.cnblogs.com/dearxinli/p/3865099.html
2. text-align 水平居中
該屬性只能對圖片、文字等行內元素(display為inline 或 inline-block 等)進行水平居中。
3. margin設置auto
- 水平方向上：
無論是塊狀元素還是行內元素，都可以通過設置 margin 的 left 和 right 為 auto，來達到水平居中的效果，此方法只能進行水平的居中，且對浮動元素或絕對定位元素無效。常用的地方，在做居中布局的時候，對於一個div設置 margin：0 auto; 來實現水平居中。
- 水平垂直方向：
對於一個塊級元素，對它做絕對定位，然后設置它的 left right top bottom 都是0， margin 是 auto， 來實現水平垂直都居中，對於行內元素，無法設置，因為margin-top 和 margin-bottom 對於行內元素不起作用；
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} .parent{ position: absolute; /* 父級元素設置相對定位 */ margin-left: 100px; margin-top: 100px; width: 600px; height: 400px; border: 1px solid #ddd; border-radius: 15px; background-color: #fff; box-shadow: 0 3px 18px rgba(0,0,0,.5); } .child{ position: absolute; /* 子級元素設置絕對定位 */ width: 100px; height: 100px; background-color: #3eb777; border-radius: 15px; left: 0; top: 0; right: 0; bottom: 0; margin:auto; /* 這個屬性設置是必須的 */ } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>效果如下：
那么，它是如何自適應的呢？
原因要考慮到絕對定位，因為絕對定位的布局取決於三個因素，一個是元素的位置，一個是元素的尺寸，一個是元素的 margin 值。
沒有設置尺寸和 margin 的元素會自適應剩余空間，位置固定則分配尺寸，尺寸固定便會分配 margin，都是自適應的。這樣就實現了絕對居中的效果。
IE7以下的渲染方式不同，渲染規則也不一樣，它不會讓定位元素去自適應。so~
推薦閱讀：
http://www.barretlee.com/blog/2014/08/07/position-and-margin/
4. vertical-align 設置圖片垂直居中(行內元素)
我們先來看一下代碼，代碼中多設置了一個空的 span 標簽，為什么要這樣，首先要搞清楚 vertical-align 這個屬性的特點，它是相對兄弟級(line-height)來定位的（這里又涉及到了line-height和vertical-align的關系了，它們兩個也是基情滿滿的，如有需要，大家可以移步到張鑫旭大神博客里進行查閱），並且它僅對行內元素有效，所以，在要定位的元素后面多加一個行內元素 span 來撐開父級的行高，以此來居中。
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} .parent{ margin-left: 100px; margin-top: 100px; width: 600px; height: 400px; border: 1px solid #ddd; border-radius: 15px; background-color: #fff; box-shadow: 0 3px 18px rgba(0,0,0,.5); text-align: center; } .child{ width: 0; line-height: 400px; } img{ vertical-align: middle; } </style> </head> <body> <div class="parent"> <img src="a21.png" alt=""> <span class="child"></span> </div> </body> </html>效果如下：
5. 使用絕對定位來實現居中
該方法只適用於那些已知寬度和高度的元素，並且絕對定位對頁面布局沒有影響的情況下。
第一步，絕對定位進行居中的原理是通過把這個絕對定位元素的 left 或 top 的屬性設置為 50%，這個時候並不是居中的，而是比居中的位置偏移了這個元素寬度或高度的一半距離；
第二步，已知寬高的元素，可以使用一個負的 margin-left 或 margin-top 的值來把它拉回到居中的位置，這個負的 margin 值就是這個元素寬度或高度的一半。
未知寬高的元素，中可以使用 transform:translate(); 這個屬性進行設置，這個位移屬性是相對於自身進行的，可以傳入兩個參數，分別是 x 和 y 方向上的偏移量，所以可以傳入 (-50%,-50%) 使得元素移動到中心位置實現水平垂直居中。
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} .parent{ position: relative; margin-left: 100px; margin-top: 100px; width: 600px; height: 400px; border: 1px solid #ddd; border-radius: 15px; background-color: #fff; box-shadow: 0 3px 18px rgba(0,0,0,.5); text-align: center; } .child{ position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background-color: #3eb777; border-radius: 15px; margin-top: -50px; margin-left: -50%; /*transform: translate(-50%,-50%); */ /*css3中的新屬性*/ } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>第一步效果：
第二步效果：
轉載