第147天：web前端开发中的各种居中总结

一、水平居中

方法① ：行内元素 （父元素）text-align，（子元素）inline-block

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

总结：

优点：兼容性好，支持低版本浏览器

缺点：需要同时在父元素和子元素上设置

适用场景：子元素数量少（或只有一个），并且需要兼容低版本浏览器时使用，不受float影响

 

方法②：块状元素   使用margin:0 auto来实现

.child{width:200px;margin:0 auto;} 

优点：兼容性好

缺点：需要指定宽度

前提：用于子元素上，不受float影响

方法③：（子元素）display:table;margin:0 auto;

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

优点：只需要对自身进行设置

缺点：不兼容IE6和IE7

适用场景：子元素数量多，不方便修改父元素的属性，对浏览器版本要求相对较低时使用

方法④：绝对定位实现 （父元素）position:relative，（子元素）absolute+left+transform（translateX(-50%)）

.parent{position:relative;}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/
.child{position:absolute;left:50%;transform:translate(-50%);} 

优点：不影响其他元素

缺点：transform兼容性，IE9及以上可用

方法⑤：flex+justify-content/margin

/*第一种方法*/
.parent{display:flex;justify-content:center;}
/*第二种方法*/
.parent{display:flex;}
.child{margin:0 auto;} 

第一种方法：

优点：只设parent

缺点：flex兼容性差，而且比较耗资源

第二种方法：

优点：代码简单

缺点：污染父元素，flex兼容性问题，如果进行大面积的布局可能会影响效率

二、垂直居中

方法① ：单行文本 设置line-height等于父元素高度

.child{ height:20px; line-height:20px} 

优点：代码简单

缺点：只适合一行文本，多行文本则不可以

这是一种很流行的方法, 也适应IE7.

 

方法② ：行内块级元素  使用display:inline-block; vertical-align:middle;

.child{display:inline-block; vertical-align:middle}
.parent:after{display:inline-block; vertical-align:middle} 

方法③ ：块级元素 使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;

/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;} 

优点：兼容性比较好，换成table可以兼容IE6,7

缺点：table-cell不能和float、position:absolute同时设置。（只能在外parent外套一层div.wrap才能设置float）

 

若元素的高度不一定的话

vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;

/*第一种方法*/
.parent{display:table}
.child{display:table-cell;vertical-align:middle;}

优点：元素高度可以动态改变，不需要css定义，如果父元素有足够空间，该元素不会被截断

缺点：IE6、7，甚至IE8 beta中无效

 

方法④：使用绝对定位

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

优点：基本只设置子元素，不影响其他元素

缺点：transform兼容性问题

方法⑤：使用flex实现方法 （父）flex + align-items

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

优点：只要设置parent

缺点：flex和align-items的兼容性

三、【终极需求】水平垂直同时居中！

方法①：元素高度固定

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;width:固定;height:固定;margin-top:-0.5*高度;margin-left:-0.5*宽度;}

适用于所有浏览器

方法②：元素高度固定

.parent{position:relative;}
.child{position:absolute;width:固定;height:固定;top:;left:;right:;
bottom:;margin:auto
} 

适用于所有浏览器

方法③：（父）text-align + table-cell + vertical-align，（子）inline-block（兼容性方案）

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

方法④：使用绝对定位

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

优点：基本只设置子元素，不影响其他元素

缺点：transform兼容性问题

方法⑤：利用flex实现

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

优点：只要设置parent

缺点：flex和align-items的兼容性