前端面试之实现元素水平垂直居中
对于被面试的人,如果习惯了一手flex布局闯天下,本篇文章将帮您回忆基础
对于面试的人,可以开阔思路,提示要点,直奔主题,避免背诵式的问答
示例代码是react
、CSS Module
描述的时候可以按照父元素...,子元素...,能否适用于不固定高度和宽度,是否适用于普通的文本元素以及多行,多个元素怎样的思路,优先级从上至下依次降低。
flex布局
适用于不固定高度和宽度,多个元素将并排显示,适用于普通的文本元素以及多行
<div className={SelfStyle.flexLayout}>
<div className={SelfStyle.child1}>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Aliquid necessitatibus quae animi dolores consectetur
</div>
<div className={SelfStyle.child2}></div>
</div>
.flexLayout {
display: flex;
border: 1px solid #000;
justify-content: center;
align-items: center;
.child1 {
width: 100px;
border: 1px solid #000;
}
.child2 {
width: 100px;
height: 400px;
border: 1px solid red;
}
}
align-content:center
和 align-items: center;
的区别
align-content:center
在出现多行时,行于行之间不会出现间隙 演示地址
position:absolute
+ transform: translate(-50%, -50%);
适用于不固定高度和宽度,多个水平垂直的子元素将重叠,脱离了普通文档流,在文档中的位置不存在,注意于flex实现的区别,一个在父元素统一设定,一个是子元素自己设定,这决定了使用场景
<div className={SelfStyle.positionWrap}>
<div className={SelfStyle.child1}>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Aliquid necessitatibus quae animi dolores consectetur
</div>
<div>123</div>
</div>
.positionWrap {
position: relative;
height: 500px;
border: 1px solid #000;
.child1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #000;
}
}
用margin-left
和margin-top
代替transform: translate(-50%, -50%);
会怎样
只适用于固定高度和宽度的元素,需要自己计算
translate
是根据元素自身的宽高计算的
line-height
、text-align
、 vertical-align
这些,场景比较多
依据CSS盒模型,通过padding
、margin
实现
position: absolute;
+ margin: auto;
如果不固定宽高将会充满容器,可以设置width
和height
,也可以设置top
、left
、right
、 bottom
,脱离了普通文档流,多个水平垂直居中的元素会重叠
<div className={SelfStyle.positionWrap}>
<div className={SelfStyle.child1}>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Aliquid necessitatibus quae animi dolores consectetur
</div>
</div>
.positionWrap {
position: relative;
height: 500px;
border: 1px solid #000;
.child1 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 200px;
margin: auto;
border: 1px solid #000;
}
}
table
布局
需要专门增加一层做单元格,适用于不定宽度和高度,垂直方向不限制子元素个数,适用于文本元素及多行
会撑大table
容器,设置宽高无效
<div className={SelfStyle.tableLayout}>
<div className={SelfStyle.subWrap}>
Lorem ipsum dolor sit
<div style={{ width: 200 }} className={SelfStyle.child1}>
Lorem ipsum dolor sit
</div>
<div className={SelfStyle.child1}>
Lorem ipsum dolor sit
</div>
<div className={SelfStyle.child1}>
Lorem ipsum dolor sit
</div>
</div>
</div>
.tableLayout {
display: table;
width: 400px;
max-width: 500px;
height: 200px;
max-height: 10px;
text-align: center;
border: 1px solid #000;
.subWrap {
display: table-cell;
vertical-align: middle;
}
.child1 {
// width: 300px;
margin: auto;
border: 1px solid #000;
}
}
本文将持续更新
关注专题 前端便利店 https://www.jianshu.com/c/c3f77a86d9a5 ,帮您省时省力!