If you are creating a web page, then most of the time, we need to center text. It is an essential operation while building a web page.
By default, the text in HTML aligned to left. This article gives a complete overview to center a text in HTML. Here, we will also provide the solution to center text horizontally and vertically.
How to Center Text in HTML (Horizontal Centering Text)
Before HTML5, the <center> tag was used to center the text in HTML. This tag align the text to center horizontally. This tag is depreciated from HTML5 and not in use. So most of the browsers are not supporting this tag.
Here is an example to center text in HTML.
<center>
<h1>Welcome to WebDevHubs</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate
nam aliquid ullam nulla, vero magni autem quas corrupti, natus
voluptas est pariatur sequi deleniti, aliquam tenetur nemo excepturi!
Cumque, porro?
</p>
</center>
In output, the heading and paragraph content will be centered horizontally.
How to Center Text in HTML5 (Horizontal Centering Text)
There is no direct method to center text in HTML5. The best method to center text in HTML5 is by using CSS property. The CSS text-align: center property is used to center the text horizontally. It is the most frequent used approach.
Here is an example to center text in HTML5 by using CSS property.
<div style="text-align: center;">
<h1>Welcome to WebDevHubs</h1>
<h3>Center Text using text-align Property</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate
nam aliquid ullam nulla, vero magni autem quas corrupti, natus
voluptas est pariatur sequi deleniti, aliquam tenetur nemo excepturi!
Cumque, porro?
</p>
</div>
In output, the headings and paragraph content will be centered horizontally using text-align property.
The text-align property is used set the text alignment. If we set the text-align property value to center, then it will align the text to center.
How to Center Text in HTML5 (Horizontally & Vertically Both)
The best method to center text in HTML5 is by using CSS properties. To center text both horizontally and vertically, the CSS Flexbox layout is the most efficient and modern approach. It allows easy alignment of content in both directions.
Here is an example to center text in HTML5 by using CSS Flexbox properties.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Center Text Horizontally & Vertically Both
</title>
<style>
* {
margin: 0;
padding: 0;
}
.center-container {
display: flex;
/* Horizontal centering */
justify-content: center;
/* Vertical centering */
align-items: center;
height: 100vh;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.center-text {
text-align: center;
}
</style>
</head>
<body>
<div class="center-container">
<div class="center-text">
<h1>Welcome to WebDevHubs</h1>
<p>
Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Cupiditate nam aliquid
ullam nulla, vero magni autem quas corrupti,
natus voluptas est pariatur sequi deleniti,
aliquam tenetur nemo excepturi! Cumque, porro?
</p>
</div>
</div>
</body>
</html>
In output, the headings and paragraph content will be centered horizontally & vertically both using CSS properties.