前端开发---页面布局解决方案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