元素上下左右居中的几种方法
定位居中1
讓外層div相對(duì)定位（得設(shè)置寬高），內(nèi)層div絕對(duì)定位，top、left分別設(shè)為50%，然后通過設(shè)置margin-top、margin-left值為寬度的負(fù)數(shù)并且是內(nèi)層div的一半，就可以成功實(shí)現(xiàn)垂直水平居中了。如下：
<style> .one{ position: relative; width: 100%; height: 500px; } .two{ position: absolute; left: 50%; top:50%; margin-left: -100px; margin-top: -100px; background-color: #a00; width: 200px; height: 200px; } </style><div class="one"><div class="two"></div> </div>定位居中2
與1類似，不過將two的定位稍作修改，不用算什么百分比，margin什么的，原理就是讓two既要往左也要往右，既要往上也要往下。這時(shí)候它就不知所措了，只好待在中間。：
.two{ position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; background-color: #a00; width: 200px; height: 200px; }這個(gè)方法，不僅能在內(nèi)部寬度不確定時(shí)發(fā)揮作用，還能兼容各種主流瀏覽器，看上去似乎很完美，但事實(shí)上，當(dāng)我們的需求改為：寬度隨內(nèi)部文字自適應(yīng) ，即寬度未設(shè)置時(shí)，這種方法就無法滿足需求了，原因是left、right設(shè)為0后，inner在寬度未設(shè)置時(shí)將占滿父元素的寬度。
定位居中3
居中的主要目的是讓里面的div在top和left方向發(fā)生50%偏移之后，再往回偏移一定距離，而在css3中新增的屬性，selector{transform：translate();}也可實(shí)現(xiàn)這個(gè)功能。translate代表著水平、垂直方向上的轉(zhuǎn)換（位移），其中當(dāng)括號(hào)內(nèi)的值設(shè)為百分比時(shí)，將以元素自身寬度為基準(zhǔn)，移位相應(yīng)的寬度，顯然設(shè)為-50%就可以實(shí)現(xiàn)我們想要的效果。
將里面的div樣式修改如下：
這個(gè)方法妥善解決了內(nèi)層div寬度不確定的問題，不用像第一種方法一樣計(jì)算應(yīng)該向左向上偏移多少了，但由于使用了css3的新屬性，在低版本ie瀏覽器下是不兼容的。
定位居中4
運(yùn)用flex布局，flex布局是移動(dòng)端一種很新潮的布局方法，利用flex布局使元素垂直水平居中，缺點(diǎn)依然是令人頭疼的兼容性問題（在ie11-中不起作用），優(yōu)點(diǎn)是代碼量比前幾種方法相比略少，方便使用。
<style> .one{ margin:0 auto;width: 100%; height: 500px; display: flex;/*設(shè)置外層盒子display為flex*/justify-content:center;/*設(shè)置內(nèi)層盒子的水平居中*/align-items:center;/*設(shè)置內(nèi)層盒子的垂直居中*/ } .two{ display: inline-block; background-color: #a00; width: 200px; height: 200px; } </style> <body><div class="one"><div class="two">我們都是好孩子</div></div> </body>以上就是使div垂直+水平居中的四種方式，各有利弊。
轉(zhuǎn)載于:https://www.cnblogs.com/dxzg/p/7617423.html
總結(jié)
以上是生活随笔為你收集整理的元素上下左右居中的几种方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HttpURLConnection， A
- 下一篇： 西门子博途编程 － 另类状态机