第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:0;left:0;right:0;
bottom:0;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的兼容性
腾讯云开发者
