There are two ways to vertically center contents with the introduction of flex box.
The first is:
.is-vertical-center {
display: flex;
align-items: center;
}
The other is:
.is-vertical-center {
display: grid;
place-items: center center;
}
Visually, both look the same. What are actual differences between the two?
Of course, you're correct. In this limited test case, the result is visually identical. Both allow for easy-to-implement (and, just as importantly, predictable and predictably-spaced) layouts. But there are significant differences between the applicability of one approach vs the other. Perhaps more than you're after, but...
One vs Two Dimensions
The main difference between the css flexbox (or the Flexible Box Layout Module) specification and the css grid specification is that the former (flexbox) is one dimensional, while the latter (grid) is two dimensional.
In other words, flexbox is intended to enable easy layout of items in a single direction: horizontally (in a row) or vertically (in a column).
grid, on the other hand, allows for layouts that require (or could benefit from) both horizontal and vertical specification: rows and columns.
Content-first vs. Layout-first
Per Harald Borgen suggests that another key difference between the two is that flexbox is a content-first spec, while grid is a layout-first spec. In other words, flexbox doesn't require much up-front layout definition to do its thing. Slap the dispay: flex rule on your flex parent and flexbox decides how to lay things out (in a predictable, sane manner, of course). Yes, the results are tweakable by adding different properties, but flexbox does a lot of the heavy lifting for you. Placement of content is fluid.
grid is a bit different in this regard. You will generally need to define your, well, grid when you first implement your layout. How many columns do you require? You need to let grid know. What content needs to go in which layout "cell?" grid cares. flexbox on the other hand, because it cares only about one dimension, can take more liberties with spacing and placement of content. With grid, the placement of content is fixed.
Rachel Andrew, a grid expert if ever there was one, makes a similar distinction but labels it:
Working from the content out [
flexbox] vs. working from the Grid definition in [grid]
Browser Support
Another salient difference (at least as this is being written in early 2019) is that browser support for flexbox (especially with the addition of autoprefixer to a front-end build process) is excellent (supporting back to IE11 [or even IE10] is a fairly trivial task, even though those browsers implement older, "tweener" syntaxes that are now outdated).
On the other hand, while browser support for grid is nothing short of pretty darn good, supporting a grid layout back to IE11 (if that's important to you) can be a bit hairy for anything other than simple scenarios (see Rachel Andrew's excellent article). As for IE10, don't bother. For this reason, some devs will "hack" flexbox to accomplish layouts that are probably better served by using the grid specification. No judgment here.
A tangent
(Bootstrap 4, for example, is something of a barometer of what's currently cross-browser compatible back to IE10: notably, it does implement a flex-powered layout system (while citing the need for vendor-specific prefixing) but does not implement grid. That doesn't mean grid lacks broad support—as noted above, support is good—nor should that fact deter one from implementing a grid-powered layout; it's just an interesting data point.)
So, to circle back around to your question: What's the difference? Visually, nothing (in this particular case). Strategically, quite a bit.
A handy article from Rachel Andrew for distinguishing use cases: https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/