20.说几个未知宽高元素水平垂直居中方法
得分点:
position
transform
flex
justify-content
align-items
vertical-align
text-align
标准回答:
未知宽高元素水平垂直都居中的实现方法:
- 设置元素相对父级定位
position:absolute;left:50%;right:50%
,让自身平移自身高度50%transform: translate(-50%,-50%);
,这种方式兼容性好,被广泛使用的一种方式 - 设置元素的父级为弹性盒子
display:flex
,设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center
,这种方式代码简洁,但是兼容性ie 11以上支持,由于目前ie版本都已经很高,很多网站现在也使用这种方式实现水平垂直居中 - 设置元素的父级为网格元素
display: grid
,设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center
,这种方式代码简介,但是兼容性ie 10以上支持 - 设置元素的父级为表格元素
display: table-cell
,其内部元素水平垂直都居中text-align: center;vertical-align: middle;
,设置子元素为行内块display: inline-block;
,这种方式兼容性较好
💞💖💓💗每个时代,
✨🌟⭐️💫都悄悄犒赏会学习的人。