實現不定寬盒子的水平居中效果。
解決方案**如下
注意 ： text-align: center 是對內聯元素起作用。會被子元素繼承。
**這個方法的優點是相容性好**
雖然在ie6,ie7下面不支援display: inline
-block這個屬性，但是可以用display: inline zoom : 1兩者的使用模仿display: inline
-block;
**缺點在於**
我們看到它在父元素.
parent中設定了text-align: center; 這個屬性會被子元素繼承，那麼.child內的文字也會居中。修復辦法是在.child中重新修改text-algin樣式。
解決方案**如下
首先對.child
table的特點在表現上像是乙個block元素，但是區別在與display
: table元素的寬度跟內容同寬。
所以利用表現上像block元素這個特點，採用margin: 0 atuo; 有效居中。
優點在於:
--不用對父元素進行關心，只需要自己進行設定就可以了
--display: table 屬性在ie8及之後有效。如果要相容到ie6，7就需要換掉結構。換成table結構。
缺點：
因為transform是css3中的屬性，所以不相容ie6,7,8.在高版本裡面也可能要加一些私有的字首
父元素成為flex容器 它的子元素自動成為flex item.
flex item元素寬度預設為auto。
缺點：相容性，不相容ie6,7,8。
優點：不用關心子元素的設定。
要求：高度不定的父元素和子元素，子元素子啊父元素中垂直居中。將圖中的demo區域居中
解決方案**如下：
注：vertical-align屬性在inline, inline-block, table-cell屬性元素上有效
相容性：在ie8及其以上有效，如果要相容ie6,7就要把結構換為table結構。
解決方案**如下
優點：因為脫離文件流 子元素不會干擾其他元素
缺點： 相容性。
1.第一步先設定display: flex; 因為在垂直方向上的拉伸特性，子元素會垂直充滿父元素。
2.增加align-items: center;
優點： 不設定子元素。
缺點： 只相容高版本的瀏覽器
要求：在水平和垂直方向上都居中。父元素盒子，子元素盒子寬高都不一定。
原始狀態：如圖
1.先水平居中
2.垂直居中
優點： 相容性比較高。
解決方案**如下
優點：
這個解決方案的優點在與子元素是absolute，所以不會對其他元素影響。
缺點：相容性
1.display: flex
2.justify-content
3.align-iemts: center;
優點： 只設定了父元素。
缺點：仍然是相容性。
CSS水平居中布局解決方案
html結構如下 class parent class child demodiv div 這裡的父元素和子元素的寬度都未知 child parent 優點 相容性很好，可以相容到ie6 zoom 缺點 text align會繼承，所以子元素要重設text align left child 設定di...
day07 css布局解決方案之居中布局
轉行學開發，100天 2018 03 23 1.水平居中 先將子框由塊級元素改為行內塊元素，再通過設定行內塊元素居中以實現水平居中 即對子框元素 display inline block 對父框元素設定 text align center 相容性好，能適應ie6,ie7 先將子框設定為塊級 顯示，即...
布局解決方案之多列布局
1 定寬與自適應布局 方案1 float margin css 1 left 6.right html 123 left45 6right 7right89 方案2 float margin fix css 1 left 6.right fix 11.right html 1 div class p...