“Làm sao căn giữa một div?” là câu hỏi kinh điển. Bài này gom lại mọi cách căn giữa theo chiều ngang, chiều dọc và cả hai, cùng tiêu chí chọn cách phù hợp cho từng tình huống.
Bạn sẽ học được
- Căn giữa văn bản và phần tử inline
- Căn giữa khối theo chiều ngang
- Căn giữa cả hai chiều bằng Flexbox, Grid, absolute
- Căn chỉnh theo đường cơ sở và vertical-align
Một số khái niệm
| Tình huống | Cách gọn nhất |
|---|---|
| Chữ, ảnh inline trong khối | text-align: center |
| Khối có chiều rộng | margin-inline: auto (hoặc margin: 0 auto) |
| Một con, căn giữa cả hai chiều | Cha: display: grid; place-items: center |
| Nhiều con xếp hàng, căn giữa | Cha: display: flex; justify-content: center; align-items: center |
| Lớp phủ, hộp thoại | position: fixed; inset: 0; margin: auto; (kèm width/height) hoặc grid |
| Biểu tượng cạnh chữ | display: inline-flex; align-items: center; gap |
Các cách căn giữa
<style>
.o { height: 110px; border: 2px dashed #90a4ae; margin-bottom: 8px; border-radius: 8px; }
.hop { width: 140px; padding: 8px; background: #2e7d32; color: #fff; border-radius: 8px; text-align: center; font-size: 13px; }
.c1 .hop { margin-inline: auto; }
.c2 { display: grid; place-items: center; }
.c3 { display: flex; justify-content: center; align-items: center; gap: 8px; }
.c4 { position: relative; } .c4 .hop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
</style>
<div class="o c1"><div class="hop">margin-inline: auto</div></div>
<div class="o c2"><div class="hop">grid + place-items</div></div>
<div class="o c3"><div class="hop">flex</div><div class="hop">flex</div></div>
<div class="o c4"><div class="hop">absolute + translate</div></div>Kết quả hiển thị
Biểu tượng và chữ thẳng hàng
<style>
.nut { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; background: #1565c0; color: #fff; font-size: 15px; }
.nut svg { width: 18px; height: 18px; }
img.inline { vertical-align: middle; border-radius: 50%; }
</style>
<span class="nut"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>Thêm mới</span>
<p>Ảnh đại diện <img class="inline" src="https://picsum.photos/seed/av/32/32" width="32" height="32" alt=""> căn giữa theo dòng chữ.</p>Kết quả hiển thị
Mẹo hay
Khi một cách căn giữa không ăn, kiểm tra xem phần tử có chiều rộng xác định chưa (margin auto cần width) và cha có chiều cao không (căn dọc cần không gian dọc).
Lưu ý
vertical-align chỉ tác dụng với phần tử inline, inline-block và ô bảng, không dùng để căn dọc khối div.
Thực hành
- Căn giữa một thẻ đăng nhập giữa màn hình bằng grid.
- Căn nút có biểu tượng và chữ thẳng hàng.
- Tạo hộp thoại căn giữa bằng absolute + translate.
- So sánh 4 cách căn giữa, ghi lại khi nào dùng cách nào.
Tóm tắt bài học
- text-align cho nội dung inline.
- margin-inline: auto cho khối có width.
- grid place-items: center là cách ngắn nhất cho cả hai chiều.
- inline-flex + align-items cho biểu tượng và chữ.