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

/* 1. Grid — ngắn nhất cho một phần tử ở giữa */
.wrap { display: grid; place-items: center; min-height: 100dvh; }

/* 2. Flexbox — cách quen thuộc nhất */
.wrap { display: flex; justify-content: center; align-items: center; }

/* 3. Flex + margin auto trên con — hữu ích khi container đã là flex sẵn */
.wrap { display: flex; }
.wrap > .box { margin: auto; }

/* 4. Absolute + transform — khi không kiểm soát được container */
.box {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}