html結構如下
class="parent">
class="child">demodiv>
div>
.child
.parent
缺點：text-align會繼承，所以子元素要重設text-align：left
.child
display: table會讓div呈塊狀元素，但是寬度和內容相同。接著設定margin: 0 auto;就可以居中了
優點： 相容性好，低版本ie可以使用table布局，且只在子元素上設定屬性即可
.parent
.child
transform: translatex(50%)設定為百分比是相對於自身的百分比的特性
優點：子元素脫離文件流
缺點：不支援ie678，其他瀏覽器可能需要加入私有字首
.parent
缺點：相容性問題。flex是css3的規範
CSS水平居中和垂直居中解決方案
一 css 居中 水平居中 div等標籤本身沒有定義自己居中的屬性，網上很多的方法都是介紹用上級的text align center，然後巢狀一層div來解決問題。可是這個方法有時候完全不起作用，而且對於布局是非常不科學的方法。正確的的設定寫法如下 對頁面構造沒有影響 div 這句css居中的意思就...
布局解決方案 居中布局
實現不定寬盒子的水平居中效果。解決方案 如下 注意 text align center 是對內聯元素起作用。會被子元素繼承。這個方法的優點是相容性好 雖然在ie6,ie7下面不支援display inline block這個屬性，但是可以用display inline zoom 1兩者的使用模仿di...
CSS 布局 水平居中
一 水平居中 1 行內元素水平居中 父級元素設定text align center 實現在塊級元素內部的行內元素 inline inline block inline flex inline table 水平居中 dome 由此可見，塊級裡面的塊級元素水平居中也可以先把裡面的塊級設定成行內塊元素2 ...