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