問題描述：
給定兩個元素，這兩個元素是父子級關係。並且兩個元素的大小都是不確定的，那麼這時候如何讓子級在父級中上下左右都居中？（暫且設定父級比子級要大一些）
先上**及效果：
思路：父級相對定位，子級絕對定位 而四個定位屬性的值都設定了0，那麼這時候如果子級沒有設定寬高，則會被拉開到和父級一樣寬高。而現在設定了子級的寬高，所以寬高會按照我們的設定來顯示，但是實際上子級的虛擬佔位已經撐滿了整個父級，這時候再給它乙個margin：auto它就可以上下左右都居中了
先上**，效果：
思路：父級相對定位，子級絕對定位，而top，left這兩個屬性的如果給百分比，那麼這個百分比則是相對於父級的寬高來進行計算的，如果只給定這兩個值，則子級的右上角會和父級的中心點對齊，得到下圖：
這時候則需要進一步操作：css3中的位移屬性，則是根據自身來計算百分比的，所以只需要利用這個屬性把自身再往左上角各移動50%就可以讓子級在父級中上下左右都居中了
**及效果：
思路：首先，把子級轉換成內聯塊元素，那麼左右居中就可以直接利用text-align:center搞定了，而這個方法難點就在上下居中上。子級是乙個內聯塊元素，當然不可能說給父級設定乙個行高子級就乖乖的上下居中了。所以需要更加複雜的操作：
首先給子級設定垂直對齊方式：vartical-align 這個屬性只對內聯元素以及內聯塊元素起作用，
它有這麼些值：top,bottom,middle等等 我想這些值的意思就不需要我解釋了。
但是這個屬性有乙個缺點：需要乙個參照物，也就是說如果父級裡面有兩個子元素，兩個子元素都設定了vertical-align:middle，那麼得到的效果只是這兩個元素之間居中對齊而已。並不會把兩個子元素都放在父級的中間。
小技巧一：把其中乙個元素設定高度百分百，那麼這時候另乙個元素就會處於父級上下居中的位置了，如圖：
但是這時候就多出來了乙個元素了，與需求不符。當然了，如果說你在實際布局中，確實有兩個元素，並且其中乙個元素可以設定為高度百分百的話，這麼做是可以的。
小技巧二：想辦法把另乙個元素消除掉——利用偽元素before，詳情請看**。
**：
css水平垂直居中多種方法
結構 parent childblock 塊級元素 inline 內聯元素 text align有效 width,height無效 文字稱開 inline block 行內塊級元素 塊 內 注意 width,height有效 結構 child會導致脫離文件流 浮動float，設定絕對定位，固定定位 ...
CSS元素居中多種寫法
一 水平居中 1.行內元素水平居中 利用 text align center 可以快速實現塊級元素內部行內元素水平的居中。此方法對inline inline block inline table和inline flex等行內元素水平居中有效。如果塊級元素內部包著另外乙個塊級元素，我們可以將內部塊級元...
元素居中瀏覽器的多種方法集錦
第一種最常見 元素是絕對定位而不是相對定位 inner 測試表明，這是唯一在ie6 ie7上也表現良好的方法。優點 1.良好的跨瀏覽器特性，相容ie6 ie7。2.量少。缺點 1.不能自適應。不支援百分比尺寸和min max 屬性設定。2.內容可能溢位容器。3.邊距大小與padding,和是否定義b...