使一个div垂直+水平居中的几种方法
前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個問題：
思路1：絕對定位居中（原始版）
這個是我回答出來的，也是被各位所熟知的一種方法，設外層div相對定位，內層div絕對定位，top、left分別設為50%，然后通過設置margin-top、margin-left值為寬度的負數就可以成功實現垂直水平居中了：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> <style type="text/css"> *{margin: 0;padding:0;} .outer{ width: 80%; height: 400px; background: #ccc; margin: 0 auto; position: relative; } .inner{ width: 400px; height: 300px; background: green; position: absolute; top: 50%;left: 50%; margin-top: -150px;/*設為高度的1/2*/ margin-left: -200px;/*設為寬度的1/2*/ } </style> </head> <body><div class="outer"><div class="inner"></div></div> </body> </html>很常見的，這個經典的方法最大的不足之處是inner的寬度必須是固定值，否則margin-top和margin-left的值將無法設置，為了解決這個問題，我們考慮將使inner發生位移的代碼由margin-top、margin-left換成其他形式，換成什么呢？請看第二種方法：
思路2：絕對定位居中（改進版之一）
我們的目的是讓inner在top和left方向發生50%偏移之后，再往回偏移一定距離，而css里關于位置偏移的屬性還有什么呢？當我們查閱最新版的css3屬性之后，發現這樣一個屬性：selector{transform：translate();},translate代表著水平、垂直方向上的轉換（位移），其中當括號內的值設為百分比時，將以元素自身寬度為基準，移位相應的寬度，這樣一來，我們的問題就得到了解決：
<style type="text/css"> *{margin: 0;padding:0;} .outer{ width: 80%; height: 400px; background: #ccc; margin: 0 auto; position: relative; } .inner{ width: 70%; height: 300px; background: green; position: absolute; top: 50%;left: 50%; transform: translate(-50%,-50%);/*在水平和垂直方向上各偏移-50%*/ } </style><body><div class="outer"><div class="inner"></div></div> </body>這個方法妥善解決了內層div寬度不確定的問題，但由于使用了css3的新屬性，在低版本ie瀏覽器下是不兼容的。由此，我們想到了第三種方法：
思路3：絕對定位居中（改進版之二）
<style type="text/css"> *{margin: 0;padding:0;} .outer{ width: 80%; height: 400px; background: #ccc; margin: 0 auto; position: relative; } .inner{ width:70%; height: 300px; background: green; position: absolute; top: 0;left:0;right:0;bottom:0;/*讓四個定位屬性都為0*/ margin:auto;/*很關鍵的一步*/ } </style>這個方法，不僅能在inner寬度不確定時發揮作用，還能兼容各種主流瀏覽器，看上去似乎很完美，但事實上，當我們的需求改為：寬度隨內部文字自適應 ，即寬度未設置時，這種方法就無法滿足需求了，原因是left、right設為0后，inner在寬度未設置時將占滿父元素的寬度。
（你可以在思路二的基礎上將inner寬度去掉，內部放一些文字，你會發現在第二種思路下這種需求是可以滿足的）
思路4：flex布局居中
flex布局是移動端一種很新潮的布局方法，利用flex布局使元素垂直水平居中，缺點依然是令人頭疼的兼容性問題（在ie11-中不起作用），優點是代碼量比前幾種方法相比略少，方便使用。
讓我們一起來了解一下：
以上就是使div垂直+水平居中的四種方式，關于第三種思路中inner無法對內容自適應的問題，目前我還沒有想出解決辦法，希望高人們能夠指點一二。
參考文章:小tip: margin:auto實現絕對定位元素的水平垂直居中--來自張鑫旭-鑫空間-鑫生活
總結
以上是生活随笔為你收集整理的使一个div垂直+水平居中的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 再不用担心DataRow类型转换和空值了
- 下一篇： django 初试