前端開發---頁面佈局解決方案1

1、水平佈局

.parent與.child元素寬度和高度不給出

1、默認情況下

<div class="parent">
	<div class="child">Children</div>	
</div>

 

2、inline-block +text-align情況下

.parent{text-align: center;}
.child{display: inline-block;}

 

特點：不兼容IE6、7,兼容性好。缺點是.parent的所有子元素繼承text-align的屬性。

3、table + margin 情況下

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

特點：display:table屬性最低支持IE8。只需更改.child元素就可以了。

4、absolute + transform 情況下

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

特點：.child是絕對定位，不會對其他元素產生影響。不支持IE6、7、8

5、flex + justify-content 情況下

.parent{display:flex;justify-content:center;}
/*或者等價於
.parent{display:flex;}
.child{margin:0px auto;}
*/

特點：display:flex不支持IE6、7、8 。

2、垂直居中

設置.parent的div元素height:440px;不定寬。

在下面案例中，只設置了高度height:300px;便於觀察效果。

1、默認情況下

2 、table-cell + vertical-align 情況下

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

特點：兼容性好，不兼容IE6、7

3 、absolute + transform 情況下

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

特點：.child子元素不干擾其他元素。不兼容IE6、7、8

4 、flex + align-items 情況下

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

 

 特點：兼容性差，不支持IE6、7、8

3、居中

父元素寬度和高度不確定

1、inline-block + text-align + table-cell + vertical-align 情況下

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

 本案例爲了方便查看效果，指定了.parent元素寬度和高度。

特點：兼容性好，不支持IE6、7

2、absolute + transform 情況下

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

特點：transform的兼容性問題，不支持IE6、7、8

3、flex + justify-content + align-items 情況下

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

 特點：兼容性問題，不支持IE6、7、8