通过引入弹性框，有两种方法可以垂直居中内容。
首先是：
.is-vertical-center {
display: flex;
align-items: center;
}
另一个是：
.is-vertical-center {
display: grid;
place-items: center center;
}
在视觉上，两者看起来都一样。这两者之间有什么实际差异？
当然，你是对的。在这个有限的测试案例中，结果在视觉上是相同的。两者都允许易于实现（并且同样重要的是，可预测和可预测间隔）布局。但是，一种方法与另一种方法的适用性存在显着差异。也许比你追求的更多，但......
一对二维
css flexbox（或Flexible Box Layout Module）规范与css grid规范之间的主要区别在于前者（flexbox）是一维的，而后者（grid）是二维的。
换句话说，flexbox旨在实现在单个方向上轻松布局项目：水平（连续）或垂直（在列中）。
另一方面，grid允许布局需要（或可能受益于）水平和垂直规范：行和列。
内容优先与布局优先
Per Harald Borgen suggests认为，两者之间的另一个关键区别是flexbox是内容优先规格，而网格是布局优先规格。换句话说，flexbox不需要太多的前期布局定义来完成它的工作。将dispay: flex规则压在你的父亲身上，而flexbox决定如何摆出姿势（当然是以可预测的，理智的方式）。是的，通过添加不同的属性可以调整结果，但flexbox为您做了很多繁重的工作。内容的放置是流动的。
grid在这方面有点不同。首次实现布局时，通常需要定义网格。你需要多少列？你需要让grid知道。什么内容需要在哪个布局“单元格？” grid关心。另一方面，flexbox，因为它只涉及一个维度，可以通过间距和内容的放置来获得更多的自由。使用grid，内容的位置是固定的。
网格专家雷切尔·安德鲁（Rachel Andrew），如果有的话，会做出类似的区分但标注它：
使用内容[
flexbox]与[grid]中的网格定义进行比较
浏览器支持
另一个显着的差异（至少在2019年初编写）是对flexbox的浏览器支持（特别是在前端构建过程中添加了autoprefixer）非常出色（支持回到IE11 [甚至IE10]是一个相当简单的任务，即使这些浏览器实现了现在已经过时的旧的“tweener”语法。
另一方面，虽然浏览器对grid的支持不亚于pretty darn good，但支持网格布局回IE11（如果这对你来说很重要）对于除了简单场景之外的其他任何事情都可能有点毛茸茸（参见Rachel Andrew的excellent article）。至于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之前提到的那样：
'Flexbox是一种用于在行或列中布置项目的一维布局方法。
'CSS Grid Layout是一个用于网络的二维布局系统。