Cách căn giữa div trong CSS: mọi phương pháp, có đo kiểm

Câu trả lời ngắn

Để căn giữa một div theo cả chiều ngang và chiều dọc bên trong phần tử cha, biến phần tử cha thành grid và căn giữa nội dung của nó:

.parent {
  display: grid;
  place-items: center;
  min-height: 200px; /* the parent needs room to center in */
}

Cách này hợp với phần tử con có kích thước bất kỳ và không cần đặt gì trên chính phần tử con. Dưới đây là sáu phương pháp đặt cạnh nhau. Mỗi hộp tự đo sau khi hiển thị và in ra khoảng cách từ tâm của nó đến tâm phần tử cha:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Six ways to center</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 12px; margin: 8px; }
    .grid-of-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
    .stage { height: 130px; background: #e5e7eb; border: 1px solid #9ca3af; }
    .box { width: 100px; padding: 8px; background: #2563eb; color: white; text-align: center; }
    p { margin: 4px 0 0; }

    .flex { display: flex; justify-content: center; align-items: center; }
    .grid { display: grid; place-items: center; }
    .auto { display: flex; }
    .auto .box { margin: auto; }
    .abs { position: relative; }
    .abs .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .inset { position: relative; }
    .inset .box { position: absolute; inset: 0; margin: auto; height: 20px; }
    .content { align-content: center; }
    .content .box { margin-inline: auto; }
  </style>
</head>
<body>
  <div class="grid-of-demos">
    <div><div class="stage flex"><div class="box">flex</div></div><p></p></div>
    <div><div class="stage grid"><div class="box">grid</div></div><p></p></div>
    <div><div class="stage auto"><div class="box">margin: auto</div></div><p></p></div>
    <div><div class="stage abs"><div class="box">absolute</div></div><p></p></div>
    <div><div class="stage inset"><div class="box">inset: 0</div></div><p></p></div>
    <div><div class="stage content"><div class="box">align-content</div></div><p></p></div>
  </div>
  <script>
    document.querySelectorAll('.stage').forEach((stage) => {
      const s = stage.getBoundingClientRect();
      const b = stage.querySelector('.box').getBoundingClientRect();
      const dx = (b.left + b.width / 2) - (s.left + s.width / 2);
      const dy = (b.top + b.height / 2) - (s.top + s.height / 2);
      stage.nextElementSibling.textContent =
        'off center: x ' + Math.round(dx) + 'px, y ' + Math.round(dy) + 'px';
    });
  </script>
</body>
</html>

Cả sáu đều báo 0px trên cả hai trục (viền 1px của khung bằng nhau ở mọi cạnh, nên không làm lệch tâm). Thử đổi chiều rộng hoặc chữ trong một hộp rồi chạy lại: những phương pháp không phụ thuộc vào kích thước cố định vẫn giữ ở 0.

Nên dùng phương pháp nào

Cách 1: flexbox

Flexbox căn giữa theo hai trục bằng hai thuộc tính. justify-content lo trục chính (chiều ngang khi xếp thành hàng), còn align-items lo trục phụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center;     /* vertical */
      gap: 8px;
      height: 180px;
      background: #e5e7eb;
    }
    .child { padding: 12px 16px; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
  </div>
</body>
</html>

Khi có nhiều phần tử con, flexbox căn giữa chúng như một nhóm và giữ chúng trên một hàng. Đây là chỗ flexbox hơn grid, vì grid sẽ xếp ba mục thành một cột ở giữa. Trang justify-content trình bày mọi giá trị căn chỉnh.

Cách 2: grid

place-items: center là cách viết tắt của align-items: center cộng justify-items: center. Trên một grid container chỉ có một phần tử con, nó căn giữa phần tử đó theo cả hai hướng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: grid;
      place-items: center;
      min-height: 180px;
      background: #e5e7eb;
    }
    .card { max-width: 220px; padding: 16px; background: white; border: 2px solid #2563eb; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="card" id="card">A card of any size, centered by its parent.</div>
  </div>
</body>
</html>

Dùng min-height thay vì height để phần tử cha cao thêm khi thẻ cao hơn 180px, thay vì để thẻ tràn ra ngoài.

Cách 3: margin: 0 auto (chiều ngang)

Một phần tử khối có chiều rộng nhỏ hơn phần tử chứa nó có thể được căn giữa theo chiều ngang bằng margin hai bên tự động. Trình duyệt chia đều khoảng trống cho hai bên:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      max-width: 360px;
      margin: 0 auto;          /* same as margin-inline: auto */
      padding: 16px;
      background: #fef3c7; border: 2px solid #f59e0b;
    }
    .no-width { margin: 12px auto 0; padding: 16px; background: #fee2e2; border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <div class="page" id="page">max-width: 360px and margin: 0 auto</div>
  <div class="no-width" id="nowidth">margin: auto without a width: nothing to center</div>
</body>
</html>

Hộp thứ hai chiếm hết chiều rộng, nên không có khoảng trống và không có gì dịch chuyển. Đó là lý do thường gặp khiến margin: 0 auto "không chạy". Cách này cũng chỉ căn giữa theo chiều ngang trong luồng bình thường; margin auto theo chiều dọc ở đó bằng 0. Tuy vậy, bên trong phần tử cha flex hoặc grid, margin: auto căn giữa theo cả hai hướng, chính là hộp thứ ba trong phần so sánh ở trên.

Cách 4: position absolute và transform

Khi phần tử phải nằm đè lên nội dung khác (nhãn trên ảnh, hộp thoại trên trang), đặt nó ở vị trí absolute tại 50% rồi kéo lùi lại một nửa kích thước của chính nó:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .photo {
      position: relative;      /* the reference box */
      height: 180px;
      background: linear-gradient(135deg, #bfdbfe, #1e3a8a);
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: white; border-radius: 999px; font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo">
    <div class="play" id="play">Play</div>
  </div>
</body>
</html>

top: 50%; left: 50% đặt góc trên bên trái của phần tử vào tâm. Phần trăm trong translate() tính theo kích thước của chính phần tử, nên -50% kéo nó lùi lại một nửa chiều rộng và chiều cao, dù chúng là bao nhiêu. Phần tử cha phải được định vị (position: relative), nếu không phần tử sẽ căn giữa theo trang. Định vị được trình bày ở trang position.

Một biến thể cho phần tử có kích thước biết trước: position: absolute; inset: 0; margin: auto; cùng với width và height. Các margin tự động chia đều khoảng trống ở cả bốn cạnh.

Cách 5: align-content trên một khối bình thường

align-content: center giờ cũng chạy trên các khối chứa thông thường, không chỉ flex và grid. Nó căn giữa nội dung theo chiều dọc mà không thay đổi cách sắp xếp các phần tử con:

.parent {
  min-height: 200px;
  align-content: center;   /* vertical centering, still display: block */
}
.child {
  max-width: 300px;
  margin-inline: auto;     /* horizontal centering */
}

Thuộc tính này được hỗ trợ trên Chrome, Firefox và Safari hiện tại. Trình duyệt cũ bỏ qua nó, nên hãy dùng grid nếu bạn phải hỗ trợ các trình duyệt đó.

Căn giữa trên toàn màn hình

Để căn giữa một hộp thoại trong viewport bất kể cuộn trang, kết hợp một lớp cố định phủ toàn màn hình với grid:

.overlay {
  position: fixed;
  inset: 0;                     /* covers the viewport */
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 50%);
}

Để căn giữa nội dung cả trang theo chiều dọc, dùng min-height: 100dvh trên phần tử cha thay vì 100vh: trên điện thoại, 100vh tính cả vùng nằm sau thanh công cụ của trình duyệt, nên "tâm" bị lệch xuống thấp.

Căn giữa chữ là một việc khác

Mọi cách ở trên đều căn giữa một hộp. Để căn giữa chữ bên trong hộp, dùng text-align: center trên hộp đó, như ở trang căn giữa chữ trong HTML. Bạn thường cần cả hai: grid để căn giữa thẻ, và text-align để căn giữa các dòng chữ bên trong.

Lỗi thường gặp

• Phần tử cha không có chiều cao. Căn giữa theo chiều dọc cần khoảng trống; phần tử cha co lại vừa nội dung thì không có khoảng trống nào.
• margin: 0 auto trên một khối chiếm hết chiều rộng. Đặt width hoặc max-width trước.
• margin: auto để căn giữa theo chiều dọc trong luồng bình thường. Margin tự động theo chiều dọc ở đó bằng 0; hãy dùng flex hoặc grid.
• Căn giữa absolute mà phần tử cha không được định vị. Phần tử sẽ căn giữa theo trang, không phải theo hộp.
• align-items: center trên phần tử con. Các thuộc tính căn chỉnh đặt trên phần tử cha (flex hoặc grid container), trừ margin: auto và align-self.
• text-align: center để căn giữa một khối. Nó căn giữa nội dung inline (chữ, ảnh, phần tử con inline-block), không căn giữa phần tử con dạng khối.