How Can I Center Text (Horizontally and Vertically) Inside a div

While designing web pages, developers can add various components, including images, text, tables, and others. Furthermore, text can be center aligned in a div using multiple CSS properties. The most popular method for horizontally centering text is to utilize the “text-align” attribute. Moreover, you can also use the “line-height” and “vertical-align” attributes for vertically aligning the text.

This post will state the method for centering the text vertically as well as horizontally inside a div.:

How to Center Text Horizontally Inside a div?

To center text horizontally inside a div, check out the given procedure.

Step 1: Make a div Container

Initially, create a div container with the help of the “<div>” element. Then, insert an “id” attribute inside the div opening tag. After that, embed some text in between the div tag:

 
Output

Step 2: Access div Container to Center Align Text

Now, access the div container with the help of the “id” attribute name with selector “#” and apply the following CSS properties:

 
Here:

• • “width” property is utilized for setting the width size of the container.
  • “margin” specifies a blank space outside of the container.
  • “padding” defines a space inside of the element’s boundary.
  • “background” sets the background color at the back side of the element.
  • “text-align” property is utilized for setting the alignment of the text as “center”.
  • “color” specifies a color for the text inside the boundary.

It can be observed that we have successfully centered aligned text horizontally inside the created div:

How to Center Text Vertically Inside a div?

To center text vertically inside a div container, follow the provided instructions.

Step 1: Access the div Container

First of all, access the created div container.

Step 2: Apply CSS properties to Center Text Vertically

Then, apply the below listed CSS properties to center text vertically in a div:

 
According to the above code snippet:

• • Set the “display” that specifies the display behavior of the element as “table-cell”, which means it acts like the cell of the table in the div element.
  • “width” property specifies the element width size.
  • “height” sets the height of the element.
  • “padding” defines a blank space inside of the element.
  • “color” is utilized for setting the color of the text inside the element.
  • “background-color” specifies the color of the element’s backside.
  • “border” property defines a boundary on an element.
  • “vertical-align” property is utilized for setting the vertical alignment of a defined element in the “middle”.

Output

You have learned about the complete procedure to center the text inside the container in both ways, vertically and horizontally.

Conclusion

To center the text vertically and horizontally inside a div, first, create a div container with the help of <div> element and access it by utilizing the selector. Then, apply CSS properties in which the “text-align” property is utilized for horizontal alignment, and “vertical-align” sets vertical alignment. This post demonstrated the methods for centering the text vertically and horizontally inside a div.