CSSCó 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.
Several approaches work:
Flexbox: display: flex; justify-content: center; align-items: center; on the container. Or display: flex; on container + margin: auto; on the child.
Grid shorthand: display: grid; place-items: center; — shorthand for both align-items + justify-items. place-content: center works even without an explicit height.
For a single element, display: grid; place-items: center; is the most concise modern approach.