Căn giữa dọc phần tử với CSS

Căn giữa dọc bằng padding

Cách đơn giản: đặt padding-top và padding-bottom bằng nhau cho container. Phần tử con sẽ nằm giữa theo chiều dọc.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .center {
      padding: 50px 0; /* Trên/dưới 50px, trái/phải 0 */
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <h2>Căn giữa dọc</h2>
  <p>Dùng padding để căn giữa div theo chiều dọc:</p>
  <div class="center">
    <p>Tôi được căn giữa dọc.</p>
  </div>
</body>
</html>

Lưu ý: Cách này phù hợp khi chiều cao container không cố định. Nếu container có height cố định, dùng Flexbox (display: flex; align-items: center) hoặc Grid hiệu quả hơn.