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

YY小怪兽

已于 2022-10-19 17:10:00 修改

阅读量113

点赞数

分类专栏：前端面试题文章标签： css css3 前端

于 2022-10-19 17:07:08 首次发布

本文链接：https://blog.csdn.net/lihui61357457/article/details/127411857

版权

前端面试题专栏收录该内容

35 篇文章 2 订阅

订阅专栏

本文介绍了四种常见的网页元素居中技巧：绝对定位配合translate，弹性盒子的justify-content和align-items，网格布局的居中，以及表格单元格的text-align和vertical-align。这些方法各有优缺点，适用于不同的场景和浏览器兼容性需求。

摘要由CSDN通过智能技术生成

1. 设置元素相对父级定位`position:absolute;left:50%;top: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; `，
    这种方式兼容性较好