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}
text align center⽅法③ ：块级元素 使⽤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的兼容性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。