Có những cách nào để căn giữa một phần tử bằng CSS (center a div)?

Các cách chính, xếp theo mức nên dùng hiện nay:

1. Flexbox — mặc định cho hầu hết trường hợp:

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

**2.

Grid** — ngắn nhất:

.parent { display: grid; place-items: center; }

3. position: absolute + translate — khi phần tử tách khỏi luồng (overlay, modal):

.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Dùng translate(-50%) thay vì margin âm cố định vì nó tính theo kích thước của chính phần tử — không cần biết trước width/height.

4. margin: auto — căn giữa ngang cho block có width (margin: 0 auto); riêng trong flex/grid context, margin: auto căn giữa được cả hai chiều.

5. text-align: center — chỉ căn nội dung inline (chữ, ảnh inline) bên trong block, không căn chính block đó.

Ý hay được hỏi kèm: căn giữa theo chiều dọc từng là bài toán khó vì chiều cao phụ thuộc nội dung — flexbox/grid giải quyết triệt để, nên các cách cũ (display: table-cell, line-height bằng chiều cao) không còn lý do để dùng.