จัดตำแหน่งข้อความกึ่งกลางรูปภาพด้วย CSS Transform

ใช้ transform: translate(-50%, -50%) ร่วมกับ top: 50% และ left: 50% เพื่อจัดข้อความกึ่งกลางรูปภาพอย่างแม่นยำ

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
        }
        .topleft {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 18px;
        }
        img {
            width: 100%;
            height: auto;
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <h2>Image Text</h2>
    <p>Add some text to an image in the center of an image:</p>
    <div class="container">
        <img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
        <div class="topleft">Center</div>
    </div>
</body>
</html>

หลักการ: top: 50%; left: 50% ย้ายจุดมุมซ้ายบนของ Element ไปกึ่งกลาง translate(-50%, -50%) ดึงกลับครึ่งขนาดตัวเอง ทำให้ Center จริง