Differences between HTML <center> Tag and CSS “text-align: center;” Property

18 May, 2021
If you are designing a simple web page, then not much difference is noticeable, but it is very necessary to understand the basic differences between these two. Since we are only concerned with the text, these elements do not have separate meanings.HTML <center> tag: The <center> tag in HTML is used to set to align of text into the center. This tag is not supported in HTML 5. CSS property is used to set the alignment of the element instead of the center tag in HTML 5. It is a block-level element that is used to display the text enclosed in the tag in the center horizontally. Most common browsers such as Google Chrome, Mozilla Firefox, Internet Explorer support this tag. 
Example: The below code was earlier used in HTML 4 and older versions to align text to the center.htmlhtml<!DOCTYPE html><html>  <head>    <style>        h1 {            color: green;        }    </style></head>  <body>    <center>        <h1>GeeksforGeeks</h1>        <h2>HTML center Tag</h2>          <p>            GeeksforGeeks: A computer science portal for Geeks.        </p>      </center></body>  </html>
html
<!DOCTYPE html><html>  <head>    <style>        h1 {            color: green;        }    </style></head>  <body>    <center>        <h1>GeeksforGeeks</h1>        <h2>HTML center Tag</h2>          <p>            GeeksforGeeks: A computer science portal for Geeks.        </p>      </center></body>  </html>
Output:
CSS “text-align: center;” Property: It is a CSS property used to align the text in the center, which can be used in many components, including tables, buttons, etc. 
Example: The implementation of “text-align: center” property is given below:htmlhtml<!DOCTYPE html> <html>   <head>     <title>        text-align: center property    </title>           <style>         h1 {             color:green;         }     </style> </head>   <body>     <h1 style="text-align:center;">        GeeksforGeeks    </h1>           <h2 style="text-align:center;">        CSS "text-align:center;" Property    </h2>           <p style="text-align:center;">        GeeksforGeeks:         A computer science portal for Geeks.    </p>   </body>   </html>       
html
<!DOCTYPE html> <html>   <head>     <title>        text-align: center property    </title>           <style>         h1 {             color:green;         }     </style> </head>   <body>     <h1 style="text-align:center;">        GeeksforGeeks    </h1>           <h2 style="text-align:center;">        CSS "text-align:center;" Property    </h2>           <p style="text-align:center;">        GeeksforGeeks:         A computer science portal for Geeks.    </p>   </body>   </html>       
Output:
You can notice both the outputs are the same, but in the case of HTML5 code, we use inline CSS to align our text to the center. In the previous code for HTML4 and older versions, we use specifically the <center> tag.Differences between HTML <center> tag and CSS “text-align: center;” property: 
Akanksha_Rai
ghoshsuman0129
CSS-Properties
HTML-Tags
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)