通过引入弹性框，有两种方法可以将内容垂直居中。
首先是：
.is-vertical-center {
display: flex;
align-items: center;
}
另一个是：
.is-vertical-center {
display: grid;
place-items: center center;
}
从视觉上看，两者看起来都一样。两者之间的实际区别是什么？
当然，你是对的。在这个有限的测试用例中，结果在视觉上是相同的。两者都允许易于实现(同样重要的是，可预测和可预测的间隔)布局。但是，一种方法与另一种方法的适用性之间存在显着差异。也许比你追求的更多，但是...
一维与二维
cssflexbox(或弹性框布局模块)规范和 cssgrid规范的主要区别在于前者(flexbox)是一维的，而后者(grid)是二维的。
换句话说，flexbox旨在使项目在单个方向上轻松布局：水平(在行中)或垂直(在列中)。
另一方面，grid允许需要(或可以从中受益)水平和垂直规范的布局：行和列。
内容优先与布局优先
Per Harald Borgen认为，两者之间的另一个关键区别是flexbox是内容优先的规范，而网格是布局优先的规范。换句话说，flexbox不需要太多的前期布局定义来做它的事情。把dispay: flex规则打在你灵活的父母身上，flexbox决定如何布置事情(当然，以一种可预测的、理智的方式)。是的，结果可以通过添加不同的属性来调整，但flexbox为您完成了很多繁重的工作。内容的放置是流动的。
在这方面，grid有点不同。在首次实现布局时，通常需要定义网格。您需要多少列？你需要让grid知道。哪些内容需要进入哪个布局"单元格"？grid在乎。 另一方面，flexbox因为它只关心一个维度，所以可以在内容的间距和放置方面获得更多的自由。使用grid，内容的位置是固定的。
雷切尔·安德鲁(Rachel Andrew)是一位网格专家，如果有的话，她也做出了类似的区分，但将其标记为：
从内容输出 [
flexbox] 与从 [grid中的网格定义工作
浏览器支持
另一个显着的区别(至少在2019年初编写时)是浏览器对flexbox的支持(特别是在前端构建过程中添加了自动前缀)非常出色(支持回IE11 [甚至IE10]是一项相当微不足道的任务，即使这些浏览器实现了现在已经过时的较旧的"补间"语法)。
另一方面，虽然浏览器对grid的支持非常好，但支持回到IE11的网格布局(如果这对你很重要)对于简单场景以外的任何事情来说可能有点毛茸茸的(参见Rachel Andrew的优秀文章)。至于IE10，不要打扰。出于这个原因，一些开发人员会"破解"flexbox来完成使用grid规范可能更好地服务的布局。这里没有判断。
切线
(例如，Bootstrap 4 是目前跨浏览器兼容 IE10 的晴雨表：值得注意的是，它确实实现了flex驱动的布局系统(同时引用了特定于供应商的前缀的需求)，但没有实现grid。这并不意味着grid缺乏广泛的支持(如上所述，支持是好的)，这一事实也不应该阻止人们实现grid驱动的布局;这只是一个有趣的数据点。
那么，回到你的问题：有什么区别？从视觉上看，什么都没有(在这种特殊情况下)。从战略上讲，相当多。
Rachel Andrew 的一篇方便的文章，用于区分用例：https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/
正如 SLaks 之前提到的：
"弹性框是一种一维布局方法，用于在行或列中布置项目。">
- 因此，您可以使用它来管理列表，例如产品布局。您正在为每个产品编写行为代码。
"CSS Grid Layout是Web的二维布局系统。
- 当您想要定义网页上固定元素的位置(如页眉、正文、页脚)时很有用。每个孩子都有一个明确的位置。