The HTML <center> element is obsolete and should not be used in new pages. Browsers may still render it in older markup, but the right replacement depends on what you are centering: use text-align: center for text and inline content, auto margins for a constrained block, and Flexbox or Grid for layout.
What did the <center> tag do?
<center> was a block-level element that horizontally centered its contents within its parent. For example:
<center>
<h1>Welcome</h1>
<p>Introductory text</p>
</center>It affected presentation, not meaning: the tag did not say that its contents were a heading, introduction, or other semantic unit. HTML 4 marked it deprecated in favor of CSS; the HTML 4 specification is one historical reference for that change.
Is <center> valid or still supported?
For modern HTML authoring, <center> is obsolete and non-conforming. It may nevertheless appear to work in browsers because support for old pages is preserved for compatibility. The MDN reference advises against using it, while the WHATWG rendering guidance describes legacy rendering behavior. Those rendering rules help explain what browsers do with old content; they are not a recommendation for new markup.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
So, if you see the tag on an existing site, its apparent success does not make it a good choice for new code or a guarantee about future behavior. Replace it with CSS and keep the HTML focused on structure and meaning. The element’s obsolescence is a maintainability and authoring concern, not proof that every page using it has an accessibility failure.
Choose a replacement based on what needs centering
Center text and inline content
Apply text-align: center to the block that contains the text, links, or other inline-level content:
<section class="intro">
<h1>Welcome</h1>
<p>This heading and paragraph are centered.</p>
</section>.intro {
text-align: center;
}This centers the inline content inside the section; it does not center the section’s own box. See MDN’s text-align reference for the property’s behavior.
Center a block horizontally
To center an element’s own box, give it a constrained width and automatic inline margins:
<div class="card">Centered block</div>.card {
width: min(100% - 2rem, 40rem);
margin-inline: auto;
}The width leaves room for the equal margins to be visible, while the min() expression lets the card fit a narrow viewport. A full-width block may not visibly move when given automatic margins because it already fills the available space. margin-inline is the logical-property form of left and right margins.
Center an image
For an image centered as a box, make it block-level and apply automatic inline margins. Limit its width so it can shrink to fit its container:
<img class="centered-image" src="photo.jpg" alt="A landscape">.centered-image {
display: block;
max-width: 100%;
height: auto;
margin-inline: auto;
}An image is typically inline by default, so setting display: block is important when using auto margins this way.
Center a row or group with Flexbox
Use Flexbox when a group of items needs alignment along one dimension, or when you want to center content on both axes inside an area:
.toolbar {
display: flex;
justify-content: center;
gap: 1rem;
}
.hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 20rem;
}With the default flex-direction: row, justify-content aligns along the horizontal main axis and align-items along the vertical cross axis. If you set flex-direction: column, the axes switch. Vertical centering also needs usable space: give the container a height or minimum height, as in the hero example.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Center an item with Grid
For a single item centered on both axes, Grid offers a concise rule:
.center-box {
display: grid;
place-items: center;
min-height: 20rem;
}place-items: center centers items in both the inline and block directions. As with Flexbox, the container needs height for vertical positioning to be noticeable. Grid is also a natural choice when the surrounding design is organized in rows and columns.
How to migrate old markup without changing its purpose
Replace the presentational wrapper with an element that reflects the content’s role when one fits, then apply the appropriate CSS to that element:
Recommended Free Tools
Best Value
- Used Book in Good Condition
Text or a heading and paragraph
<header class="site-header">
<h1>Welcome</h1>
<p>Introductory text</p>
</header>.site-header {
text-align: center;
}A vertically centered message
<section class="message-area">
<p>Message</p>
</section>.message-area {
display: grid;
place-items: center;
min-height: 12rem;
}Choose a semantic element such as header, main, section, or footer when it accurately describes the content. Replacing <center> with an unexplained <div class="center"> changes the syntax without clarifying the structure.
Common centering problems and fixes
- “
text-align: centerdid not center my box.” It centers inline content inside the element, not the element’s own layout box. Constrain the box’s width and usemargin-inline: auto. - “Auto margins did nothing.” The element may already be full width. Give it a width or maximum width so there is remaining space around it.
- “The image is not centered.” Make it block-level before applying auto margins.
- “Flexbox did not center vertically.” Check that
align-items: centeris set for the intended axis and that the container has a useful height. Also checkflex-direction, which changes the axes. - “The layout overflows on a phone.” Replace an unbounded fixed width with a responsive constraint, such as
width: min(100% - 2rem, 40rem). - “The page changed after removing the tag.” Identify whether the old wrapper centered text, a box, a group, or content vertically; apply the matching rule at the parent or element that owns that alignment.
Do not substitute the legacy align="center" attribute for <center>. It is another presentational approach; use CSS for alignment instead. The WHATWG’s legacy rendering guidance describes compatibility behavior, not a modern authoring pattern.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
