作者： Ahmad Shadeed
译者：前端小智
起源：ishadeed
挪动端浏览：https://mp.weixin.qq.com/s/kp...
点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。
github 地址：https://github.com/qq44924588...
程度居中
内联元素
要使内联元素（如链接，span 或img）居中，应用 text-align: center 足够了。
<div class="desk"> <span class="plate"></span></div>.desk { text-align: center;}对于多个内联元素，也能够应用text-align：center:
<div class="desk"> <span class="plate"></span> <span class="plate"></span></div>.desk { text-align: center;}Flexbox
应用 flexbox 也能够疾速居中元素：
.desk { display: flex; justify-content: center;}对于多个内联的我的项目，也能够失常工作：
CSS Grid
应用网格容器时，图中的盘子将依据其网格区域居中。 请留神，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。
.desk { display: grid; justify-content: center;}块元素
Auto Margin
宽度和高度已知的块元素能够通过设置margin-left:auto 和 margin-right:auto 居中元素。
.plate { width: 120px; height: 120px; margin-left: auto; margin-right: auto;}对于多个块元素，它们应该包装在一个元素中，而后让这个父元素居中。
.tray { display: flex; margin-left: auto; margin-right: auto;}Flexbox
对于 flexbox 同样也是应用 justify-content:center 来居中元素：
.desk { display: flex; justify-content: center;}对于多个元素，咱们不须要将它们包裹在一个元素中，flexbox 能够将它们都居中。
CSS定位
通过相对定位，咱们能够轻松地通过CSS transform将其程度居中。
.plate { position: absolute; left: 50%; transform: translateX(-50%);}在已知元素宽度的状况下，能够应用负边距代替CSS transform。
.plate { position: absolute; left: 50%; margin-left: -60px;}垂直居中
内联元素
Vertical Padding
垂直居中元素最简略的办法之一是应用padding:
padding-top: 24px; padding-bottom: 24px;}Vertical Align
vertical-align属性可用于一个或多个元素。
在此示例中，叉子和刀子应与桌子垂直居中。
.desk { text-align: center;}.plate,.fork,.knife { vertical-align: middle;}Flexbox
为了对齐盘子，叉子和刀，咱们能够应用 flexbox:
.desk { display: flex; justify-content: center; align-items: center;}块元素
相对定位
通过相对定位元素，能够应用 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;}代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
原文：https://ishadeed.com/article/...
交换
文章每周继续更新，能够微信搜寻「 大迁世界 」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送Star和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。