How to align items at the center of the container using CSS ?

Last Updated : 17 Mar, 2021

An easy and common task for CSS is to align text or images into the center of any container.

Syntax:

.container{
          text-align: center;
}

Example 1: We use the text-align property of CSS to center the item horizontally followed by the vertical-align and display property to align the item to the center of the container vertically. Below examples illustrate the approach:

HTML

<!DOCTYPE html>
<html>
    <head>
        <style>
            .container{
                text-align: center;
                height: 200px;
                width : 200px;
                display: table-cell;
                vertical-align: middle;
                border: 2px solid green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <p>Centered Text</p>
        </div>
    </body>
</html>

Output :

Text is centered in the container

Example 2: Another method is to use the text-align property to center the item horizontally with the line-height property to align the items at the center of the container vertically. Below examples illustrate the approach:

HTML

<!DOCTYPE html>
<html>
    <head>
        <style>
            .container2{
                width: 200px;
                line-height: 180px;
                height: 200px;
                text-align: center;
                border: 2px solid green;
            }
        </style>
    </head>
    <body>
        <div class="container2">
            <p>Centered Text</p>
        </div>
    </body>
</html>

Output:

Text is centered in the container

My Personal Notes

Related Articles

HTML

HTML