首页 > 试题广场 >

说几个未知宽高元素水平垂直居中方法

[问答题]

说几个未知宽高元素水平垂直居中方法

查看答案及解析
添加回答
推荐
可乐加冰upuppp头像 可乐加冰upuppp

得分点

position transform flex justify-content align-items vertical-align text-align

参考答案

标准回答

未知宽高元素水平垂直都居中的实现方法：

  1. 设置元素相对父级定位position:absolute;left:50%;right:50%，让自身平移自身高度50% transform: translate(-50%,-50%);，这种方式兼容性好，被广泛使用的一种方式
  2. 设置元素的父级为弹性盒子display:flex，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center ，这种方式代码简洁，但是兼容性ie 11以上支持，由于目前ie版本都已经很高，很多网站现在也使用这种方式实现水平垂直居中
  3. 设置元素的父级为网格元素display: grid，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center ，这种方式代码简介，但是兼容性ie 10以上支持
  4. 设置元素的父级为表格元素display: table-cell，其内部元素水平垂直都居中text-align: center;vertical-align: middle; ，设置子元素为行内块display: inline-block;，这种方式兼容性较好

加分回答

京东的移动端顶部京东logo，使用的是display:flex这种模式

图片说明

延伸阅读

内联元素居中布局

水平居中

  • 行内元素可设置：text-align: center
  • flex布局设置父元素：display: flex; justify-content: center

垂直居中

  • 单行文本父元素确认高度：height === line-height
  • 多行文本父元素确认高度：disaply: table-cell; vertical-align: middle

块级元素居中布局

水平居中

  • 定宽: margin: 0 auto
  • 绝对定位+left:50%+margin:负自身一半

垂直居中

  • position: absolute设置left、top、margin-left、margin-top(定高)
  • display: table-cell
  • transform: translate(x, y)
  • flex、grid，align-items: center
编辑于 2021-09-15 11:54:34 回复(0)
等一个offer的猪猪很苗条头像 等一个offer的猪猪很苗条
通过弹性盒子：display:flex,justify-content:center;align-items:center;
通过定位：给父盒子设置:position:relative   给子盒子设置：positive:absolute;top:50%,left:50%;transtion(-50%,-50%)
通过网格布局：display:grid;justify-content:center;align-items:center;

发表于 2022-11-08 23:40:18 回复(0)
X、Are头像 X、Are
position：absolut;top:50%;left:50%;transform:transtion(-50%,-50%);
display:flex;justify-content:center;align-items:center;
display:grid;justify-content:center;align-items:center;
发表于 2022-04-12 16:42:38 回复(0)
提交观点

问题信息

上传者：小小
难度：
3条回答 467浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号