Center sticky element
Keep an element centered in the viewport while scrolling using position: sticky with top and transform — the sticky centering technique.
Scroll down to see the badge stay centered...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
Quick implementation
/*
HTML Structure:
<div class="scroll-container">
<div class="sticky-center-badge">Content</div>
<div class="scroll-content">...</div>
</div>
*/
.scroll-container {
/* 1. Define the scrollable area */
height: 280px;
overflow-y: auto;
position: relative; /* Important context */
}
.sticky-center-badge {
/* 2. Enable sticky positioning */
position: sticky;
/* 3. Center vertically relative to the container's viewport */
/* top: 50% moves top edge to center, minus half element height */
top: calc(50% - 1rem);
/* 4. Center horizontally */
left: 50%;
transform: translateX(-50%);
/* Styling */
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: var(--accent);
color: oklch(0.2 0.02 265);
border-radius: 999px;
z-index: 10;
}Prompt this to your LLM
Includes role, constraints, and framework variants.
Role: Layout engineer.
Goal: Center an element in the viewport while it scrolls using position: sticky.
Constraints:
1. Use position: sticky with top: calc(50% - N).
2. Ensure parent container has overflow-y: auto.
3. Use oklch() for all color values.
4. Center horizontally using left: 50% and transform: translateX(-50%).
5. No JavaScript required.
Variants:
A) Vanilla CSS class (.sticky-center-badge).
B) Tailwind utility classes (sticky top-1/2 -translate-y-1/2).
Edge Cases:
1. Position: sticky fails if ancestor has overflow: hidden.
2. Nested scroll containers require specific top calculations.
3. Safari quirks with sticky inside flex items.Why this matters in 2026
Position sticky has replaced many JavaScript scroll listeners for floating elements. The top: calc(50% - N) trick allows developers to keep a call-to-action, badge, or indicator perfectly centered in a scrollable area without complex math or event listeners. It is performant, accessible, and relies on the browser's compositor.
The logic
The logic is straightforward: position: sticky makes an element stick to a specific offset within its scroll container. By setting top: calc(50% - half-height), we offset the element so its top edge is exactly in the middle of the container, minus half its own height, effectively centering it. We use left: 50% and transform: translateX(-50%) to center it horizontally.
Accessibility & performance
Accessibility is generally unaffected; screen readers read the text exactly the same regardless of visual styling. Since this is a layout change, it does not impact the reading order. Performance is excellent because position: sticky is handled by the browser's compositor, avoiding layout thrashing that occurs with JavaScript scroll listeners.