前端面试常考题,16种方法实现水平垂直居中。(今年阿里、京东、网易都有涉及)
这也是一道前端面试【很容易、很经常】被问到的问题!高频题!
1、水平居中:
① text-align:center;
② margin:0 auto;
③ width:fit-content;
④ flex
⑤ 盒模型
⑥ transform
⑦ ⑧ 两种不同的绝对定位方法
2、垂直居中:
① 单行文本, line-height
② 行内块级元素, 使用 display: inline-block, vertical-align: middle; 加上伪元素辅助实现
③ vertical-align
④ flex
⑤ 盒模型
⑥ transform
⑦ ⑧ 两种不同的绝对定位方法
flex,盒模型,transform,绝对定位,这几种方法同时适用于水平居中和垂直居中。