说几个未知宽高元素水平垂直居中方法
position transform flex justify-content align-items vertical-align text-align
position
transform
flex
justify-content
align-items
vertical-align
text-align
标准回答
未知宽高元素水平垂直都居中的实现方法:
position:absolute;left:50%;right:50%
transform: translate(-50%,-50%);
display:flex
justify-content:center; align-items:center
display: grid
display: table-cell
text-align: center;vertical-align: middle;
display: inline-block;
加分回答
京东的移动端顶部京东logo,使用的是display:flex这种模式
内联元素居中布局
水平居中
垂直居中
块级元素居中布局
这道题你会答吗?花几分钟告诉大家答案吧!
扫描二维码,关注牛客网
下载牛客APP,随时随地刷题
得分点
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;
,这种方式兼容性较好加分回答
京东的移动端顶部京东logo,使用的是
display:flex
这种模式延伸阅读
内联元素居中布局
水平居中
垂直居中
块级元素居中布局
水平居中
垂直居中