第一種方法：
①，居中乙個div：
給div設定乙個寬度，margin:0px auto。
position:absolute top:50%,left:50% transform:translate(-50%，-50%)
彈性盒居中 justify-content:center align-items:center
②，居中乙個浮動元素：
居中乙個浮動元素（套乙個大盒子給它margin:0px auto。）
設定當前div的寬度，然後設定margin-left:50%; position:relative; left:-250px;其中的left是 寬度的一半。
二，第二種方法：
①，div為塊級元素，居中塊級元素首先要設定寬度，然後margin:0 auto;就居中了。
123②，居中浮動元素就麻煩一點了。
123注：left:50%;這個left按照百分比來設定left值實際移動是按父容器的寬度來算，
可以先看成box容器為body寬度為也就是瀏覽器寬度，left:50%;就是向右移動到中間，
現在還要向左移動浮動元素item一半的距離，box的float是為了讓box自身收縮，這樣item的父容器的寬度就是本身的寬度了，再設定為left:-50%;也就是向左移動自身寬度的一半。
編輯於 2017-05-03 14:52:50回覆(1)
舉報
第一種，position:relative很重要。
如果父元素相對定位，子元素絕對定位，此時依舊是margin-left: 50%, left: -5px;
第二種方法感覺並不是太好。因為left左移之後，還會有個二分之一的寬度。
如何居中乙個div？如何居中乙個浮動元素？
居中乙個div 給div設定乙個寬度，margin 0px auto。position absolute top 50 left 50 transform translate 50 50 彈性盒居中 justify content center align items center 居中乙個浮動元素...
如何居中乙個div
說到居中，很多人第一反應應該是水平居中，說到水平居中，肯定道友們有一萬種方法做到，css3 的flexbox更是強大到沒朋友。但是微笑今天想聊的是 css 垂直居中的方法，下面是萌萌的分割線。神馬？你敢說不萌？分析就這樣，我們實現了垂直和水平的居中 上面提到的方法，都有侷限性，下面介紹一種通用的方法...
如何居中乙個元素
利用 text align center 可以實現在塊級元素內部的行內元素水平居中。此方法對inline inline block inline table和inline flex元素水平居中都有效。parent此外，如果塊級元素內部包著也是乙個塊級元素，我們可以先將其由塊級元素改變為行內塊元素，再...