不說廢話，直接 搞起.....
首先，我們將題目 《css控制元素上下左右居中》 分析一下哈，我是將其分成了4部分信息：
1.CSS控制： 只用 CSS 來達成目的
2.元素： 不只是div，還包括img + and so.....(其實 原理都一樣啦，掌握了div的居中法，其它的也可以 擴展實現)
3.左右居中
4.上下居中
ok, 實際上呢 我們要解決的問題 就兩點，1.左右居中 and 2.上下居中 ...
左右居中:
#method.
-->. margin:0 auto; 即，margin-left:auto;margin-right:auto; 是核心，上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>左右居中</title> <style type="text/css"> html,body{ margin: 0; padding: 0; } .box { position: relative; /*這個可以去掉 看看效果哦，注意會有變化啊*/ width: 800px; /*寬*/ height: 600px; /*高*/ background-color: rgba(212,66,33,.86); margin: 0 auto; } .Absolute-Center { width: 100px; height: 100px; background-color: green; margin: auto; } </style> </head> <body> <div class="box"> <div class="Absolute-Center" > 我是要居中的元素 </div> </div> </body> </html>
效果圖：
上下居中：
在介紹方法之前，我先聲明一下， 這里的 上下居中法，都是已知 height的，總結分兩種情況，1. 具體height 和 2.百分比height，但無論哪種形式的height，應該都可以歸為 已知height。 下面說一說，百分比height 的兩種需要注意的情景：
情景一：position:absoute; top:0; left:0; width:xx%;height:xx%; (position:absolute;-->生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。) 所以，它的百分比height = 相對於 static 定位以外的第一個父元素的height;
情景二：position:fixed; top:0;left:0;width:xx%;height:xx%; (position:fixed;-->生成絕對定位的元素，相對於瀏覽器窗口進行定位。) 所以，它的 百分比height = 相對於瀏覽器窗口高度的height;
通過以上的 聲明分析，我總結的 上下居中，總體上分為 四種方法，針對 兩種場景：
兩種場景：
1. 未脫離文檔流 定位的元素（position：static || relative）
2. 脫離文檔流 定位的元素（position: absolute || fixed）
ok,該了解的都了解了，下面進入正題，介紹方法。
#Method1.
-->. 子容器絕對定位，top:0，bottom:0，margin:auto
即，父元素 用相對定位, 子元素 用絕對定位(relative --> absolute)，上代碼：
-->. 優點：設置起來比較簡單，使用范圍較廣；
-->. 缺點：需要子容器有一個固定的高，或百分比自適應於外部。它的高度不能是height:auto； 兼容性 IE8+；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>上下左右居中</title> <style type="text/css"> html,body{ margin: 0; padding: 0; } .box { position: relative; /*這個可以去掉 看看效果哦，注意會有變化啊*/ width: 600px; /*寬*/ height: 400px; /*高*/ background-color: rgba(212,66,33,.86); margin: 0 auto; } .Absolute-Center { width: 160px; height: 80px; background-color: green; position: absolute; top: 0; bottom: 0; left: 0; right: 0; /*css溢出法*/ margin: auto; } </style> </head> <body> <div class="box"> <div class="Absolute-Center" > 我是要居中的元素 </div> </div> </body> </html>
效果圖：
#method2.
-->. 子容器相對定位，top:50%，translateY(-50%)
即，父元素 用相對定位，子元素 用相對定位(relative --> relative)，上代碼：
-->. 優點：只設置子元素的屬性即可，無需過多計算；
-->. 缺點：應用到了CSS3的translateY,所以 兼容性 IE9+；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>上下左右居中</title> <style type="text/css"> html,body{ margin: 0; padding: 0; } .box { position: relative; 父元素定位方式 /*position: absolute; left:0; right:0;*/ /*position: fixed; left:0; right:0; */ width: 600px; /*寬*/ height: 400px; /*高*/ background-color: rgba(212,66,33,.86); margin: 0 auto; } .Absolute-Center { width: 160px; height: 80px; background-color: green; position: relative; top: 50%; -moz-transform: translateY(-50%); /*向上平移 自身的50%*/ -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); margin: auto; } </style> </head> <body> <div class="box"> <div class="Absolute-Center" > 我是要居中的元素 </div> </div> </body> </html>
效果圖：
#method3.
-->. 子元素1：float, 子元素2：clear:both; floter元素的margin-bottom值 = content的height的值的負一半
-->. 優點：position:relative;時，無需聲明 父元素的定位
-->. 缺點：需要一個同子元素 同級的 float元素輔助；需要手動計算 float元素的 margin-bottom 的值；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中 float元素 + clear:both;</title> <style> html,body{ margin: 0; padding: 0; } h3 { background-color: #3366ee; color: white; padding: 5px; } h4 { background-color: #ee6633; color: white; padding: 5px; margin-top: 10px; } strong { background-color: #33ee33; } .box { background-color: rgba(212,66,33,.86); position:relative; width: 100%; height: 500px; top: 0; left: 0; /*position:fixed; width: 100%; height: 100%; top: 0; left: 0; */ /*position: absolute; width: 100%; height: 100%; top: 0; left: 0; */ } .floater { /*重點在這里：floter的margin-bottom值 = content的height的值的負一半*/ float:left; height:50%; margin-bottom:-50px; } .content { clear:both; width:100px; height:100px; background-color: #ccc; margin: 0 auto; } </style> </head> <body> <h3>利用 設置一個浮動元素的方法 上下左右居中</h3> <div class="box"> <div class="floater"></div> <div class="content">XO</div> </div> </body> </html>
效果圖：
#method4.
-->. 子元素絕對定位，top:50%; margin-top:-(自身高度的一半)；
-->. 優點：只操作子元素的css屬性，較為簡單
-->. 缺點：子元素 和 父元素都需要設置position；需要手動計算 margin-top 的值；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上下左右居中</title> <style> html,body{ margin: 0; padding: 0; } h3 { background-color: #3366ee; color: white; padding: 5px; } h4 { background-color: #ee6633; color: white; padding: 5px; margin-top: 10px; } strong { background-color: #33ee33; } .box { background-color: rgba(212,66,33,.86); position:relative; width: 100%; height: 500px; top: 0; left: 0; /*position:fixed; width: 100%; height: 100%; top: 0; left: 0; */ /*position: absolute; width: 100%; height: 100%; top: 0; left: 0; */ } .Absolute-Center { background-color: green; /*上下居中*/ position: absolute; width: 160px; height: 80px; top: 50%; margin-top: -40px; /*左右居中*/ left:0; right: 0; margin-left: auto; margin-right: auto; } </style> </head> <div class="box"> <div class="Absolute-Center" > 我是要居中的元素 </div> </div> </body> </html>
效果圖：
介紹完畢！！！
就在我快要寫完這篇博文時，突然在網上 發現了一篇大神 寫的文章，詳細 總結了 垂直居中的方法，突然發現，差距還是蠻大的，任重而道遠，還需努力啊.....
這是大神的文章：共勉 《整理：子容器垂直居中於父容器的方案》
希望對同行們 有幫助，
抬頭一看，已是凌晨1點半， 不行了，不行了，睡了..... GOOD NIGHT!!!