For centering simultaneously horizontally and vertically there are two simple options.
The first
.outer{ display:flex; } .inner{ margin:auto; } Second
.outer{ display: flex; justify-content: center; align-items: center; } The result seems to be identical.
Which of these methods is better? In what situations and why?