Căn giữa (Center) phần tử CSS: Text-align, Margin, Flexbox, Transform

Hướng dẫn các kỹ thuật căn giữa phần tử ngang và dọc trong CSS.

1. Căn giữa Text (Inline/Inline-block)

.div-class { text-align: center; }

Áp dụng cho container chứa text, button, div con... mọi nội dung inline/inline-block bên trong sẽ căn giữa ngang.

2. Căn giữa Block Element (Container chính)

body {
  width: 800px;
  margin: auto; /* Căn giữa block level element */
}

Kiểm soát width container cha, đặt margin: auto.

3. Căn giữa Image

img {
  display: block;      /* Biến thành block */
  margin: 20px auto;   /* auto trái/phải */
  width: 50%;          /* Kiểm soát chiều rộng */
}

4. Căn giữa Dọc và Ngang trong Div

Cách A: Padding

.div-class {
  padding: 50px 0;
  text-align: center;
}

Đơn giản nhất cho nội dung đơn dòng.

Cách B: Line-height

#vertical-center-lineheight {
  line-height: 200px; /* Bằng height container */
  text-align: center;
  border: 5px double ivory;
}

Dòng đơn: line-height = height. Đa dòng: thêm display: inline-block; vertical-align: middle cho child.

Cách C: Transform

#vertical-center-transform {
  height: 200px; position: relative; border: 5px double ivory;
}
#vertical-center-transform p {
  margin: 0; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

Con absolute tại 50%/50% của cha relative, dịch chuyển ngược 50% kích thước chính nó.

Cách D: Flexbox (Khuyên dùng hiện đại)

#vertical-center-flexbox {
  height: 200px;
  display: flex;
  align-items: center;   /* Căn giữa dọc (cross axis) */
  justify-content: center; /* Căn giữa ngang (main axis) */
  border: 5px double ivory;
}

Flexbox là cách chuẩn, ngắn gọn, hỗ trợ đa dòng, responsive tốt.

Kết luận

Các phương pháp phổ biến: text-align:center (text), margin:auto (block), display:block;margin:auto (img), Flexbox (căn giữa 2 chiều - khuyên dùng), Transform (cũ), Line-height/Padding (đơn giản).