in this chapter we will see how to center a DIV horizontally and vertically using CSS 


html

  <div class="content">This works with any content</div>


css

.content {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
      }



complete example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .content {
                position: absolute;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <div class="content">This works with any content</div>
    </body>
</html>


output:





Are you facing problems in understanding this article?
You can watch the video. Watch it now