How to make text in the middle in CSS

Learn how to center text in CSS with an example. Quickly create perfect text alignment for your website!

Centering Text Using CSS

Centering text in CSS is possible in various ways. One popular technique is to use the text-align property. This property takes a value such as center and applies it to the text of an element. For example, given the following HTML, the text within the <p> element would be centered:

<p style="text-align: center;">This text is centered</p>

Another way to center text is to use the margin property. This property can be used to specify a left and right margin for an element, which will effectively center it. For example, given the following HTML, the text within the <p> element would be centered:

<p style="margin-left: auto; margin-right: auto;">This text is centered</p>

Finally, there is a third way to center text using CSS. This method involves using the display property and setting it to flex. This will create a flexbox, which can then be used to center the text. For example, given the following HTML, the text within the <p> element would be centered:

<div style="display: flex; justify-content: center;">
  <p>This text is centered</p>
</div>

These are just a few of the ways to center text using CSS. There are other methods as well, such as using positioning and the transform property. Experiment with different techniques to see which works best for your particular use case.