CSS置中布局總結

置中布局

<div class=”parent”>

<div class=”child”>demo</div>

</div>

1.水平置中

1> 方案一 inlink-block+text-align

.child {display:inlink-block;}

.parent {text-align:center;}

優點：相容性好

缺點：子項目寬高不可設定

2> 方案二 table+margin

.child {display:table; margin:0 auto;}

優點：只需要設定child（自己）

3> 方案三 absolute+transform

.parent {position:relative;}

.child {position:absolute;left:50%;transform:translateX(-50%);}

優點：子項目不會對其他元素產生影響

缺點：相容性問題

4> 方案四 flex+justify-content

.parent {display:flex;justify-content:center;}

優點：只需設定parent節點

或者設定為

.parent {display:flex;}

.child {margin:0 auto;}

缺點：flex低版本ie不支援

2.垂直置中

1> 方案一 table-cell+vertical-align

.parent {display:table-cell;vertical-align:middle;}

優點：只需設定父節點，相容性好

2> 方案二 absolute+transform

.parent {position:relative;}

.child {position:absolute;top:50%;transform:translateY(-50%);}

優點：子項目不會對其他元素產生影響

缺點：相容性問題

3> 方案三 flex+align-items

.parent {display:flex;align-items:center;}

優點：只需設定父節點

缺點：相容性問題

3.水平和垂直均置中

1> 方案一 inline-block+text-align+table-cell+vertical-align

.parent {text-align:center;display:table-cell;vertical-align:middle;}

.child {display:inline-block;}

2> 方案二 absolute+transform

.parent {position:relative;}

.child { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

3> 方案三 flex+justify-content+align-items

.parent {display:flex;justify-content:center;align-items:center;}

思路：瞭解屬性值特性，分解問題。

