จัดกึ่งกลางองค์ประกอบแนวตั้งด้วย CSS

ใช้ padding บนและล่าง

วิธีง่ายคือกำหนด padding-top และ padding-bottom เท่ากันให้พาเรนต์

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    .center {
      padding: 50px 0;
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <h2>Center Vertically</h2>
  <p>ใช้ padding จัดกึ่งกลางแนวตั้ง</p>
  <div class="center">
    <p>I am vertically centered.</p>
  </div>
</body>
</html>