CSS Align
In this page:
Aligning Text Blocks
The text-align property controls the alignment of text inside block containers, offering left, right, center, and justify options. This property behaves exactly like standard text alignment options in word processors.
Note: Center headings for visual style, but keep body text left-aligned to make it easy to read.
Warning: The text-align property only works on block-level containers; it will not align inline elements like spans.
Example: Aligning Text Blocks
<style>
p {
text-align: center;
}
</style>
<p>Centered text block</p>Centering Block Elements with Auto Margins
To center a block-level container (like a div layout card) horizontally on your page, you can pair a defined width or max-width with auto margins (margin: 0 auto). This instructs the browser to calculate the remaining space on both sides and split it equally, centering the block.
Note: Margin auto only works on block-level elements that have a defined width or max-width.
Warning: Do not apply margin auto to inline elements like spans, as they do not respect block margin calculations.
Example: Centering Block Elements with Auto Margins
<style>
.box {
width: 200px;
margin: 0 auto;
background: lightblue;
padding: 10px;
text-align: center;
}
</style>
<div class="box">Centered block</div>Aligning Inline-block Elements
Because inline-block elements sit inline with other text elements, you can easily center them horizontally by applying text-align: center to their parent container.
Note: Use this technique to quickly center horizontal lists of navigation links or inline button groups on your page.
Warning: Applying text-align: center to a parent will also center all plain text inside it, so you may need to reset text alignment on child elements.
Example: Aligning Inline-block Elements
<style>
.parent {
text-align: center;
}
.btn {
display: inline-block;
background: royalblue;
color: white;
padding: 8px 16px;
}
</style>
<div class="parent">
<span class="btn">Centered inline-block</span>
</div>Perfect Centering with Flexbox
Aligning elements vertically was historically difficult in CSS, requiring complex padding hacks. Flexbox solves this by providing display properties (like align-items: center and justify-content: center) to center elements perfectly on both axes with just a few lines of code.
Note: Use Flexbox display properties to center elements both vertically and horizontally.
Warning: Flexbox properties must be applied to the parent container to control the alignment of its child elements.
Example: Perfect Centering with Flexbox
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
background: #eee;
}
.container div {
background: coral;
padding: 10px;
}
</style>
<div class="container">
<div>Centered on both axes</div>
</div>Perfect Centering with Absolute Position
If you need to center an element that is removed from the normal page flow (like an absolute-positioned modal or pop-up), you can center it by setting top and left offsets to 50% combined with a translate transform of -50% on both axes.
Note: Use this absolute positioning technique to build perfectly centered modal containers or floating notifications.
Warning: Always set position: relative on the parent container, or the absolute element will center relative to the entire screen viewport instead.
Example: Perfect Centering with Absolute Position
<style>
.parent {
position: relative;
height: 150px;
background: #eee;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
</style>
<div class="parent">
<div class="modal">Centered modal</div>
</div>- Applying margin auto to inline elements like spans, which is ignored by browsers.
- Attempting to center block-level divs horizontally using text-align: center on the div itself instead of on its parent.
- Forgetting to add position: relative on parent containers when attempting to center absolute elements.
- Align text inside block containers using the text-align property.
- Center block-level cards horizontally by pairing auto margins with a defined width or max-width.
- Use modern Flexbox display properties to center elements perfectly on both axes easily.
Standard alignment properties, basic Flexbox controls, and absolute centering techniques are supported natively by all web browsers.
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first: