前端布局:水平垂直居中布局

2016/10/27 1503
目录
[隐藏]

这次讲的是布局中的居中布局,分为水平居中、垂直居中、水平垂直居中三个部分。html的代码均为以下相同的代码。

水平垂直居中布局

要求里面的容器宽高是不确定的,外面的容器宽高也是不确定的,实现这三种布局的方法。

水平居中布局

(1)inline-block+text-align
这种方法IE6、IE7不支持inline-block,所以改良后的代码如下,兼容IE6、IE7。

这种布局的缺点是,child里的Demo文字会因为设置了text-align:center而居中,而如果希望child里文字不居中,可以在child里加一句:text-align:left;
(2)table+margin

设置了display:table以后,宽高跟着内容走,IE8以下不支持display:table,处理办法是将布局换成table布局。
(3)absolute+transform
这种方法IE8以及以下不支持transform,别的浏览器需要加私有前缀。

(4)flex+justify-content
这种方法,IE8以及以下不支持。

或者也可以这样写:

垂直居中布局

(1)table-cell+vertical-align

这种方法IE6、IE7不支持table-cell,处理办法是把html的布局换成单元格布局。
(2)absolute+transform
这种方法IE8以及以下不支持transform,其他浏览器需要加私有前缀。

(3)flex+align-items
这种方法IE8以及以下不支持。

水平垂直居中布局

(1)inline-block+text-align+table-cell+vertical-align

这种方法IE6、IE7不支持table-cell,处理办法是把html的布局换成单元格布局。
(2)absolute+transform
这种方法IE8以及以下不支持transform,别的浏览器需要加私有前缀。

(3)flex+justify-content+align-items
这种方法IE8以及以下不支持。

分享本文: