.desk{text-align:center;}Flexbox使用flexbox也可以快速居中元素：.desk{display:flex;justify-content:center;}对于多个内联项，它也可以正常工作：CSSGrid当使用网格容器时，图中的板将基于它们的网格区域居中。请注意，这不适用于多个盘子，除非您将它们包装在一个元素中。.desk{显示：网格；justify-content:center;}blockelementAutoMargin已知宽度和高度的块元素可以通过设置margin-left:auto和margin-right:auto来居中。.plate{宽度：120px;高度：120px；左边距：自动；margin-right:auto;}对于多个块元素，应该将它们包裹在一个元素中，然后让这个父元素居中。.tray{显示：flex;左边距：自动；margin-right:auto;}Flexbox也使用justify-content:center让flexbox元素居中：.desk{display:flex;justify-content:center;}对于多个元素，我们不需要将它们包裹在一个元素中，flexbox可以将它们全部居中。CSS定位有了绝对定位，我们可以轻松地通过CSS变换将其水平居中。.plate{位置：绝对；左：50%；transform:translateX(-50%);}当元素宽度已知时，可以使用负边距代替CSStransform。.plate{位置：绝对；左：50%；margin-left:-60px;}VerticallyCenterInlineElementsVerticalPadding垂直居中元素最简单的方法之一是使用padding:padding-top:24px;padding-bottom:24px;}VerticalAlignvertical-align属性可以应用于一个或多个元素。在这个例子中，叉子和刀子应该在桌子上垂直居中。.desk{text-align:center;}.plate,.fork,.knife{vertical-align:middle;}Flexbox要对齐盘子、叉子和刀子，我们可以使用flexbox:.desk{display:flex;证明内容：居中；align-items:center;}块元素绝对定位通过绝对定位一个元素，你可以使用CSS变换使元素垂直居中：.plate{position:absolute;顶部：50%；transform:translateY(-50%);}如果你知道元素高度，你可以使用负边距而不是转换。.plate{位置：绝对；顶部：50%；margin-top:-60px;}CSSGrid使用CSSGrid，我们可以使用align-items将项目垂直居中到它们的网格区域。.desk{显示：网格；align-items:center;}水平和垂直居中内联元素Padding和TextAlign.plate{text-align:center;填充顶部：24px；padding-bottom:24px;}其他元素类型absolutePositioning.plate{position:absolute;左：50%；顶部：50%；transform:translate(-50%,-50%);}Flexbox可以通过justify-content:center和align-items:center水平居中对齐元素：.plate{display:flex;证明内容：居中；align-items:center;}CSSGrid通过place-items属性传递，它结合了justify-content和align-items:.desk{display:grid;place-items:center;}代码部署后可能出现的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。原文：https://ishadeed.com/article/...每周更新交流文章。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。这篇文章在GitHub上https://github.com/qq449245884/xiaozhi已经收录，整理了很多我的文档。欢迎明星和完美。面试可以参考考点。也关注公众号，后台就能看到福利了。你说对了。