CSS vertical-align middle ไม่ทำงาน แก้ไขอย่างไร

ใช้ภาษา CSS ต้องการจัดตำแหน่งข้อความให้อยู่ตรงกลางของ div โดยใช้คำสั่ง vertical-align middle ผลลัพธ์คือแนวนอนถูกต้อง แต่แนวตั้งไม่ถูกต้อง ข้อความอยู่ด้านบนสุดของ div ปัญหานี้ต้องแก้ไขอย่างไร

<style>
    .box {
        border: solid 2px red;
        width: 200px;
        height: 200px;
        vertical-align: middle;
    }
</style>

<div class="box">สวัสดี</div>

วิธีแก้ไข

กรณีใช้คำสั่ง vertical-align: middle เพื่อกำหนดให้ข้อความอยู่ตรงกลาง div ทั้งแนวนอน และแนวตั้ง แนะนำให้ใส่คำสั่ง display: table-cell ลงใน div หรือ elements ที่จะใช้งาน vertical-align: middle สามารถแก้ไขโค้ดได้ดังนี้

<style>
    .box {
        border: solid 2px red;
        width: 200px;
        height: 200px;
        vertical-align: middle;
        display: table-cell;
    }
</style>