<center>: The Centered Text element
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
The <center> HTML element is a block-level element that displays its block-level or inline contents centered horizontally within its containing element. The container is usually, but isn’t required to be, <body> .
This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the CSS text-align property, which can be applied to the <div> element or to an individual <p> . For centering blocks, use other CSS properties like margin-left and margin-right and set them to auto (or set margin to 0 auto ).
# Centering
(opens new window) documentation for more details on flexbox and what the styles mean.
Browser Support
Flexbox is supported by all major browsers, except IE versions before 10
Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes
For a quick way to generate prefixes there is Autoprefixer
For older browsers (like IE 8 & 9) a Polyfill is available
For a more detailed look at flexbox browser support, see this answer
# Using CSS transform
(opens new window) are based on the size of the elements so if you don’t know how tall or wide your element is, you can position it absolutely 50% from the top and left of a relative container and translate it by 50% left and upwards to center it vertically and horizontally.
Keep in mind that with this technique, the element could end being rendered at a non-integer pixel boundary, making it look blurry. See this answer in SO
HTML
CSS
# CROSS BROWSER COMPATIBILITY
The transform property needs prefixes to be supported by older browsers. Prefixes are needed for Chrome<=35, Safari<=8, Opera<=22, Android Browser<=4.4.4, and IE9. CSS transforms are not supported by IE8 and older versions.
Here is a common transform declaration for the previous example:
For more information see canIuse
# MORE INFORMATION
The element is being positioned according to the first non-static parent ( position: relative , absolute , or fixed ). Explore more in this fiddle
For horizontal-only centering, use left: 50% and transform: translateX(-50%) . The same goes for vertical-only centering: center with top: 50% and transform: translateY(-50%) .
Using a non-static width/height elements with this method of centering can cause the centered element to appear squished. This mostly happens with elements containing text, and can be fixed by adding: margin-right: -50%; and margin-bottom: -50%; . View this fiddle
# Using margin: 0 auto;
Objects can be centered by using margin: 0 auto; if they are block elements and have a defined width.
HTML
CSS
# Using text-align
The most common and easiest type of centering is that of lines of text in an element. CSS has the rule text-align: center for this purpose:
HTML
CSS
This does not work for centering entire block elements. text-align controls only alignment of inline content like text in its parent block element.
See more about text-align in Typography
# Using position: absolute
Working in old browsers (IE >= 8)
Automatic margins, paired with values of zero for the left and right or top and bottom offsets, will center an absolutely positioned elements within its parent.
HTML
CSS
Elements that don’t have their own implicit width and height like images do, will need those values defined.
# Using calc()
The calc() function is the part of a new syntax in CSS3 in which you can calculate (mathematically) what size/position your element occupies by using a variety of values like pixels, percentages, etc. Note:- Whenever you use this function, always take care of the space between two values calc(100% — 80px) .
CSS
HTML
# Vertical align anything with 3 lines of code
Use these 3 lines to vertical align practically everything. Just make sure the div/image you apply the code to has a parent with a height.
CSS
HTML
# Using line-height
You can also use line-height to center vertically a single line of text inside a container :
CSS
That’s quite ugly, but can be useful inside an <input /> element. The line-height property works only when the text to be centered spans a single line. If the text wraps into multiple lines, the resulting output won’t be centered.
# Ghost element technique (Michał Czernow’s hack)
This technique works even when the container’s dimensions are unknown.
Set up a "ghost" element inside the container to be centered that is 100% height, then use vertical-align: middle on both that and the element to be centered.
CSS
HTML
# Centering in relation to another item
We will see how to center content based on the height of a near element.
Compatibility: IE8+, all other modern browsers.
HTML
CSS
The main points are the 3 .thumb , .details and .position-container containers:
# Vertically align an image inside div
HTML
CSS
# Centering vertically and horizontally without worrying about height or width
The following technique allows you to add your content to an HTML element and center it both horizontally and vertically without worrying about its height or width.
# The outer container
- should have display: table;
# The inner container
- should have display: table-cell;
- should have vertical-align: middle;
- should have text-align: center;
# The content box
- should have display: inline-block;
- should re-adjust the horizontal text-alignment to eg. text-align: left; or text-align: right; , unless you want text to be centered
HTML
CSS
# Centering with fixed size
If the size of your content is fixed, you can use absolute positioning to 50% with margin that reduces half of your content’s width and height:
HTML
CSS
# Horizontal centering with only fixed width
You can center the element horizontally even if you don’t know the height of the content:
Centering Text in HTML
I know at first this seems like a very stupid question, but I have a good reason for asking it. Even though I might just be misled.
For EVER I have been using the <center>Text</center> tag to have text appear centered horizontally.
Apparently this tag is depreciated, and is no longer used. So I have tried using <p align=»center»>Text</p> although it seems to be buggy and I have read that It does not work in all browsers.
On top of that, when I have a header <h#> tag within a <p> tag there is also a validation issue.
The point is, I want to do this right, and although the center tag is tolerable, it is apparently not the best way to go. Why has it been depreciated? And what is your alternative? I honestly have no idea where to go from here.
P.S. Asking this question kills me inside.
Even while using the accepted answer;
I am not able to center <h> tags within the <p> tags. I have tried and read that <h# align=»center»> does not work in all browsers and I have tried applying the style to the header tag with no avail. What do you think?
15 Answers 15
The text alignment needs to be declared in CSS. You can do this in a CSS section at the top of the file, in a separate file, or in the element itself. The simplest method would be the latter (note that this method is not generally considered a good practice):
If you want to put it at the top of the html file, it would look like this:
The best method would be to have a separate CSS stylesheet containing the CSS. Then, add a link to the CSS in the <head></head> section of your html:
That will do the trick for you
try <p style=»text-align: center;»>Text</p>
or at the top of your html you can declare:
then later just apply the class:
just remember the text-align css property will work for block elements.
The politically correct way to do it is CSS.
Try to do something like:
Or even better, use a CSS stylesheet.
Really, you should not be using in-line CSS either, it is just as sloppy. You can define a style for all <p> tags, or attach a class like <p and define the header class in CSS like:
This way your style is separated from your HTML, producing a much cleaner HTML file.
Regarding a <h#> tag within a <p> tag, that is indeed a validation issue.
<h#> tags are meant to mark up headings. <p> tags are meant to mark up paragraphs.
So, if I was marking up your question, I might start like this:
If I wanted the heading to be center aligned, I’d again use CSS:
To address the implied second question, the reason you have validation issues when you have a <h#> inside a <p> is because nesting headers inside of paragraphs is not allowed in HTML 4.0 and XHTML.
To expound, headings and paragraphs are semantic concepts, meant to inform the structure of your document and not imply anything about the appearance of their content (granted, they do appear different by default but that’s not the point of their usage). It follows that a heading shouldn’t be contained within a paragraph.
If your implementation calls for nesting headers inside of paragraphs you might want to rethink your approach to what you’re trying to accomplish. If the intent is to indicate structurally «this is a heading», consider why a heading would be inside a paragraph. If the intent is to make certain text within a paragraph look different, then you would want to use one of the inline elements such as a span or em, with associated CSS styling.
HTML <center> Tag
The <center> tag is a block-level element, which means it can contain other block-level and inline elements. The content of the <center> tag (text, graphic elements, tables and so on) is aligned to the center.
You can use the CSS margin-right and margin-left properties to center blocks.
Syntax
The <center> tag comes in pairs. The content is written between the opening (<center>) and closing (</center>) tags.
Example of the HTML <center> tag:
Result
Using CSS styles
As we’ve already mentioned, the <center> tag isn’t supported in HTML5․ Instead, we use CSS styles.