How to position text to center on an image with CSS

To positioned text to center an image, use the transform property in CSS. You can try to run the following code for centered text over an image


Live Demo

<!DOCTYPE html>
         .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;
      <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>

Updated on: 25-Jun-2020

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started