多个你不知道的 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 原文：
更多干货文章，可关注小智的公众号：大迁世界 (打开微信，搜索公众号) ，里面有很多类似的文章，有需要啥资料的也可以在评论区跟我说，我会尽量解答。