多个你不知道的 CSS 居中方案( 二 )
块元素绝对定位通过绝对定位元素 ， 可以使用 CSS transform将元素垂直居中：
.plate {position: absolute;top: 50%;transform: translateY(-50%);}
文章插图
如果知道元素高度 ， 则可以使用负边距代替transform 。
.plate {position: absolute;top: 50%;margin-top: -60px;}CSS Grid使用CSS网格 ， 我们可以使用align-items将项目垂直于其网格区域居中 。
.desk {display: grid;align-items: center;}
文章插图
水平垂直居中内联元素Padding 和Text Align
.plate {text-align: center;padding-top: 24px;padding-bottom: 24px;}其他元素类型绝对定位.plate {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
文章插图
Flexbox通过 justify-content:center 和 align-items:center 就可以将元素垂直水平居中：
.plate {display: flex;justify-content: center;align-items: center;}CSS Grid通过place-items属性就可以通过 ， 它结合了justify-content和align-items:
.desk {display: grid;place-items: center;}作者：Ahmad Shadeed 译者：前端小智 来源：ishadeed 原文：
更多干货文章 ， 可关注小智的公众号：大迁世界 (打开微信 ， 搜索公众号) ， 里面有很多类似的文章 ， 有需要啥资料的也可以在评论区跟我说 ， 我会尽量解答 。
推荐阅读
- 影像旗舰vivo X60系列正式开售 斩获多个线上平台双冠军
- 2020百度地图生态大会：开放平台十周年 为行业送出多个解决方案“大礼包”
- 还记得那个买苹果手机的小男孩吗？如今的他过得怎么样呢？
- 荣耀手环6简评：这是一个有“偏见”的产品
- 创维小湃盒子P3 Pro深度评测
- 被人删除还不知道？通过微信上方“+”号，就能知道是否被删好友
- 觉得自己听力一天不如一天？会是耳机惹得祸吗
- 你不知道的6个微信隐藏功能，个个超实用，学到就是涨知识
- 华为手机的这4个小功能，要是你还不知道，就真的有点OUT了
- 用户|不说不知道，微信“搜一搜”有这么多新玩法