How to Center Text in CSS
Three simple methods to center text horizontally, vertically, or both. Copy-paste ready code examples.
Quick Answer
Horizontal Only
text-align: center;Both Directions
display: grid; place-items: center;text-align: center
The classic method for horizontal text centering. Simple and works everywhere.
Flexbox Centering
Centers text both horizontally and vertically. Most versatile method.
CSS Grid Centering
The shortest code for centering in both directions.
Frequently Asked Questions
Use text-align: center on the parent element. This works for all inline content including text, spans, and inline-block elements. It's the most straightforward method and has 100% browser support.
Use Flexbox: display: flex; justify-content: center; align-items: center; on the parent. Or use Grid: display: grid; place-items: center;. Both methods center text in both directions.
vertical-align only works on inline and table-cell elements, not block elements. For block elements, use Flexbox or Grid. vertical-align: middle aligns inline elements relative to each other, not within a container.
More CSS Tutorials
Copy CSS from Website
Extract styles with 2 clicks
Center a Div (CSS)
Flexbox, Grid, and more
Center a Div (Tailwind)
Utility classes for centering
Convert CSS to Tailwind
CSS to utility classes
Glassmorphism Effect
Frosted glass UI style
Neumorphism Button
Soft UI button design
Responsive Navbar
Mobile-friendly navigation
Sticky Header
Fixed navigation on scroll
CSS Pagination
Page navigation styles
CSS Accordion
Expandable content sections
Dropdown Menu
Hover and click dropdowns
CSS Modal
Popup dialog boxes
Toast Notifications
Animated alert messages
Hamburger Menu
Animated menu icon
Animate Gradients
Moving gradient backgrounds
Skeleton Loader
Loading placeholder UI
Element Screenshot
Capture any element as image
Pick Color from Website
Eyedropper tool comparison
Identify Fonts
Find fonts on any website
Download All Images
Bulk save images from any site
Measure Elements
Page ruler and measurements
Extract Colors from Website
Get any color palette instantly
Dark Mode Toggle
CSS variables and localStorage
Responsive Grid
CSS Grid auto-fit and minmax
Make Text Bold
font-weight values explained
Add Shadow in CSS
box-shadow, text-shadow, drop-shadow
Round Corners in CSS
border-radius and pill shapes
Style File Input
Custom upload buttons