How can I center a fixed-width element horizontally in its parent?
Quick answer
Give the block a constrained width and set its left and right margins to auto. When the parent has extra horizontal space, the automatic margins share it evenly and center the block. If the parent is as wide as or narrower than the block, there is no positive leftover space to share, so the block may overflow instead of fitting. [S1]
The question, the details, the next step.
What is the simplest way to center a fixed-width block horizontally inside its parent?
Give the block a width, then set both horizontal margins to auto. When the parent has room on either side, the automatic margins share the available horizontal space evenly, placing the block in the center. [S1]
Minimal pattern:
.child {
width: 400px;
margin-left: auto;
margin-right: auto;
}This is the basic pattern for a block with a constrained width and available horizontal space. [S1]
Why does the same CSS look centered in a wide parent but not in a narrow one?
Automatic side margins center the block by sharing the horizontal space left over after its width is accounted for. If the parent is wider than the block, there is positive space to share. If the parent is as wide as or narrower than the block, there is no positive leftover space to split into equal margins. [S1]
For example, a 400-pixel-wide child in a 600-pixel-wide parent leaves 200 pixels to share, so the margins can each take 100 pixels. In a 300-pixel-wide parent, the child does not fit. The auto margins do not make it narrower, so it may extend beyond the parent. [S1]
What should I do if the parent can be narrower than the fixed width?
First decide whether the child must remain exactly 400 pixels wide. If it must, the centering rule alone cannot make it fit inside a narrower parent; you will need to decide how your layout should handle that size conflict. [S1]
If the child should fit instead, its width needs to be allowed to be smaller than 400 pixels in that situation. Automatic margins handle centering when space is available; they do not change the child’s width to create that space. [S1]
Can you show a before-and-after CSS pattern and a quick way to choose?
Here is the comparison. The first pattern keeps the child at 400 pixels; the second leaves its width available for you to adjust when a narrower parent needs to be accommodated.
/* Before: fixed width may exceed a narrow parent. */
.child-fixed {
width: 400px;
margin-left: auto;
margin-right: auto;
}
/* After: choose a width that fits the parent. */
.child-adjustable {
width: 300px; /* Example only: choose a suitable width for your layout. */
margin-left: auto;
margin-right: auto;
}Use the fixed-width version when the parent has enough horizontal space. If the parent can be narrower, choose a width that fits that layout and keep the automatic side margins for centering when space is available. The centering rule itself does not resolve an oversized child. [S1]
A practical checklist
Give the block a constrained width.
Set both horizontal margins to
auto.Check whether the parent is wider than the block.
Decide how the layout should handle a parent narrower than the chosen width.
A few more useful answers
Will automatic margins make an oversized child fit?
No. They share available horizontal space; if the child is as wide as or wider than its parent, there is no positive leftover space to distribute. The child may overflow. [S1]
What width should I use if the parent can be narrow?
Choose a width that fits the parent for the layout you need. Automatic margins can center the block when there is horizontal space, but do not reduce its width. [S1]
Sources
References used for this guide.
- [S1] Box alignment for block layouts: Centering with auto margins developer.mozilla.org · Checked