Free tools Windows power users keep installed
One-click scans. No signup required.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To center elements inside a <fieldset>, first decide what you mean by “center”: the fieldset box, a group of controls, inline text, or the <legend>. For most forms, the clearest solution is to center a width-constrained wrapper inside the fieldset, then use grid or flexbox to arrange its contents.
A reliable starting pattern
Keep the fieldset and legend for their semantic purpose, and use a wrapper to control the form layout:
<form>
<fieldset class="form-section">
<legend>Contact details</legend>
<div class="fieldset-content">
<div class="field">
<label for="email">Email</label>
<input id="email" name="email" type="email">
</div>
<div class="field">
<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel">
</div>
<button type="submit">Continue</button>
</div>
</fieldset>
</form>.form-section {
box-sizing: border-box;
inline-size: min(100% - 2rem, 40rem);
margin-inline: auto;
min-inline-size: 0;
}
.fieldset-content {
inline-size: min(100%, 30rem);
margin-inline: auto;
display: grid;
gap: 1rem;
}
.field {
display: grid;
gap: 0.35rem;
}
.field input {
box-sizing: border-box;
inline-size: 100%;
max-inline-size: 100%;
}
.fieldset-content > button {
justify-self: center;
}This centers the fieldset within its parent and the content column within the fieldset. Labels and controls stay in a predictable, left-aligned column. The min() sizing lets the layout contract on narrow screens rather than forcing a fixed width.
Center the fieldset itself
Centering the fieldset box is different from centering its contents. Give it a constrained width and automatic inline margins:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
fieldset {
box-sizing: border-box;
inline-size: min(100% - 2rem, 40rem);
margin-inline: auto;
}margin-inline: auto centers a suitably sized box in its parent. It does not center the controls inside that box. Logical properties such as inline-size and margin-inline also adapt to writing direction more naturally than left/right-specific properties.
Center a group of controls inside the fieldset
Center a content wrapper
For a form column, set a maximum width on the wrapper and center it with auto margins:
.fieldset-content {
inline-size: min(100%, 30rem);
margin-inline: auto;
}This is usually the most predictable option when the fieldset contains a legend, help text, several rows, or multiple regions. It centers the overall column without requiring every label, input, and message to be positioned independently.
Use flexbox for a simple stack
Flexbox works when the fieldset’s content is a straightforward one-dimensional group. Set the direction to column to stack items, then use align-items to center them horizontally:
fieldset {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
fieldset > .fieldset-content {
inline-size: min(100%, 30rem);
}With a column flex container, align-items controls horizontal alignment in the usual left-to-right writing mode. If the children become unexpectedly narrow, remember that centering them prevents the normal cross-axis stretching; give the wrapper an explicit or constrained width, as above. A wrapper is preferable for more complex fieldsets because the legend has special rendering behavior.
Use grid for centered items or form rows
For direct children that should each be centered, grid can be concise:
fieldset {
display: grid;
justify-items: center;
gap: 1rem;
}Grid is also a natural choice when repeated labels and controls need consistent rows or columns. MDN documents that a fieldset styled with flexbox or grid establishes the corresponding formatting context for its contents; the fieldset and legend still have special behavior, so avoid assuming they behave exactly like a plain <div>. See MDN’s fieldset reference.
Center text or inline controls
text-align: center aligns text and inline-level content. It can work for a short line of text or inline choice labels:
.choice-group {
text-align: center;
}It is not a general layout tool for block elements, flex items, or grid items. If an input or wrapper is a box that needs positioning, use auto margins, flexbox, or grid instead. The distinction between text alignment and box alignment is covered in MDN’s CSS box alignment guide.
Center content horizontally and vertically
Vertical centering only becomes visible when the container has extra height beyond its contents. For example:
Rank #3
- 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
fieldset {
min-block-size: 20rem;
display: grid;
place-items: center;
}place-items: center centers grid items along both axes within available space. The flexbox equivalent for a vertically stacked group is:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →fieldset {
min-block-size: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}In a column flex layout, justify-content centers along the vertical main axis and align-items centers across it. With the default row direction, those axes are reversed. If the fieldset’s height is only as tall as its contents, there is no surplus space to center within.
If the goal is to center a form on the page, center an outer layout container instead of giving the fieldset an arbitrary height:
.page {
min-block-size: 100vh;
display: grid;
place-items: center;
padding: 1rem;
}
fieldset {
inline-size: min(100%, 30rem);
}For a centering walkthrough covering flexbox, grid, and auto margins, see MDN’s guide to centering an element.
Align labels and controls into rows
Centering every label and input individually often makes a form harder to scan. A better compromise is to center a maximum-width column, then align its repeated fields consistently.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallFor a stacked layout:
.fieldset-content {
display: grid;
gap: 1rem;
}
.field {
display: grid;
gap: 0.35rem;
}For labels beside controls on wider screens, switch to two columns and stack them on narrow screens:
.fieldset-content {
display: grid;
gap: 0.75rem 1rem;
inline-size: min(100%, 40rem);
margin-inline: auto;
}
.field {
display: grid;
grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
align-items: center;
gap: 0.75rem;
}
.field input,
.field select,
.field textarea {
inline-size: 100%;
box-sizing: border-box;
}
@media (max-width: 35rem) {
.field {
grid-template-columns: 1fr;
align-items: start;
}
}The minmax(0, 1fr) track allows the control column to shrink instead of overflowing because of its contents. The breakpoint changes the layout when side-by-side labels no longer have enough room; adjust it to suit the form and supported viewports.
Align radio buttons and checkboxes
For a vertical list of choices, center the list as a group while keeping its options aligned to a common edge:
.options {
display: grid;
justify-items: start;
gap: 0.5rem;
inline-size: min(100%, 24rem);
margin-inline: auto;
}For a compact horizontal group, use flexbox with wrapping so choices can move onto additional lines on small screens:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches.options {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem 1rem;
}Related choices belong in a semantic group, typically a fieldset with a legend, rather than being visually grouped alone.
Best Value
Center the legend without sacrificing its purpose
The first nested <legend> supplies the fieldset’s caption. It is rendered over the fieldset’s block-start border and does not behave like an ordinary heading or layout child. MDN explains the element’s semantics and special rendering in its fieldset reference.
A common starting point for a centered caption is:
fieldset {
text-align: center;
}
legend {
margin-inline: auto;
padding-inline: 0.5rem;
}But text-align also affects inline content inside the fieldset. If you want a centered legend and left-aligned form content, reset alignment on a wrapper:
.form-section {
text-align: center;
}
.fieldset-content {
inline-size: min(100%, 30rem);
margin-inline: auto;
text-align: start;
}Keep the legend as the fieldset’s caption rather than replacing it with a styled <div>. It helps communicate the group to assistive technology; see MDN’s form-styling guidance. When using flexbox or grid directly on a fieldset, check the legend’s appearance in the browsers your project supports.
Why common centering attempts fail
align-itemson a regular fieldset does nothing:align-itemsneeds a flex or grid formatting context. Adddisplay: flexordisplay: gridto the relevant container.text-align: centerdoes not move an input box: it aligns text and inline-level content, not every element’s box. Center a wrapper or use a layout system.margin: autodoes not center the intended item: apply it to the box you actually want centered, and give that box a constrained width. Auto margins do not center arbitrary inline content or vertically center an element.- Vertical centering seems ineffective: the container may have no extra height. Set a suitable minimum block size or center the outer page container.
- Inputs become narrow in a centered flex layout:
align-items: centerstops cross-axis stretching. Set a width on the content wrapper or usealign-items: stretchwhen appropriate. - Content overflows a narrow fieldset: fieldsets have a default minimum inline size of
min-content, which can affect shrinking. In constrained layouts, trymin-inline-size: 0; also cap controls withmax-inline-size: 100%and usebox-sizing: border-box. - Wrapped flex rows do not align as expected: flexbox is one-dimensional; for repeated rows and columns, grid gives more direct two-dimensional control.
Useful safeguards for a constrained form include:
fieldset,
.fieldset-content,
input,
select,
textarea {
box-sizing: border-box;
max-inline-size: 100%;
}
fieldset {
min-inline-size: 0;
}Choose the layout that matches the job
- Center the fieldset box: constrain its width and use
margin-inline: auto. - Center a content column: give a wrapper a maximum width and use
margin-inline: auto. - Center text or inline content: use
text-align: center. - Center a simple stack of controls: use column flexbox with
align-items: center, or grid withjustify-items: center. - Center in both axes: use grid’s
place-items: centeror flexbox, and ensure the container has free space. - Align repeated labels and controls: use grid tracks inside a centered wrapper.
- Center the legend independently: preserve it as the caption, style cautiously, and keep the main content in a wrapper.
Avoid absolute-positioning inputs to center them: it removes them from normal flow and can cause overlaps when labels wrap, validation messages appear, or the viewport changes. Use CSS layout rather than the obsolete <center> element.
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.
