What's the difference between margin:auto and justify-content / align-items center?

To center both horizontally and vertically simultaneously, there are two simple options:

First

.outer {
  display:flex;
}
.inner {
  margin:auto;
}

Second

.outer {
  display: flex;
  justify-content: center;
  align-items: center;
}

What's the difference? In what situations would we use one over the other?