Làm thế nào để center cả horizontal và vertical bằng Flexbox?

Có nhiều cách center với Flexbox/Grid:

Flexbox: display: flex; justify-content: center; align-items: center; trên container. Shorthand: place-items: center (Grid) hoặc dùng margin: auto trên child trong flex container.

Grid: display: grid; place-items: center; — shorthand cho cả align-items + justify-items. place-content: center hoạt động kể cả khi không set explicit height.

Với single element: display: grid; place-items: center; trên container là cách ngắn gọn nhất.