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

Last Updated : 29 Feb, 2024

To align items at the center of the container in CSS is quite an easy task, we will explain two different approaches to make the container item aligned to the center.

Table of Content

Centering items of container by text-align, display & vertical-align Property
Centering items of container by text-align & line-height Property

Let’s create a container and place an item inside of that container, where we will perform the above-mentioned approaches.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Align items at the center of the container using CSS</title>
    <style>
        .container {
            height: 200px;
            width: 200px;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>GeeksforGeeks<br>Centered Text</p>
    </div>
</body>
 
</html>

Centering items of container by text-align, display & vertical-align Property

CSS text-align property is used to specify the horizontal alignment of text in an element. Inside a block element or table-cell box. and text-align: the center property is used to set the text-alignment into the center. Vertical-align and display property will let us to put the item vertically center aligned.

Syntax:

.container{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

Example:

HTML

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

Output:

Centering-item-of-container

Explanation: We used 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.

Centering items of container by text-align & line-height Property

CSS text-align property to center the item horizontally with the line-height property to align the items at the center of the container vertically. This approach will not be applicable if you have multiple line of text element. It is not recommended.

Example 2:

HTML

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

Output:

Centering items of container by text-align & line-height Property Output

Explanation: In this approach we have used the text-align: center; to keep the text in the center of the container horizontly. The line-height property used to center the text in the container vertically. CSS line height property fixed the text position genuely it’s not centered we just place the text at that place where it will look like center aligned vertically.

Suggest improvement

Which property is used to underline, overline, and strikethrough text using CSS ?

How to center a table with CSS ?

Share your thoughts in the comments