Centering an element in CSS is a task that is very different if you need to center horizontally or vertically.
In this post I explain the most common scenarios and how to solve them. If a new solution is provided by Flexbox I ignore the old techniques because we need to move forward, and Flexbox is supported by browsers since years, IE10 included.
Center horizontally
Text
Text is very simple to center horizontally using the text-align
property set to center
:
p {
text-align: center;
}
Blocks
The modern way to center anything that is not text is to use Flexbox:
#mysection {
display: flex;
justify-content: center;
}
any element inside #mysection
will be horizontally centered.
Here is the alternative approach if you don’t want to use Flexbox.
Anything that is not text can be centered by applying an automatic margin to left and right, and setting the width of the element:
section {
margin: 0 auto;
width: 50%;
}
the above margin: 0 auto;
is a shorthand for:
section {
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
Remember to set the item to display: block
if it’s an inline element.
Center vertically
Traditionally this has always been a difficult task. Flexbox now provides us a great way to do this in the simplest possible way:
#mysection {
display: flex;
align-items: center;
}
any element inside #mysection
will be vertically centered.
Center both vertically and horizontally
Flexbox techniques to center vertically and horizontally can be combined to completely center an element in the page.
#mysection {
display: flex;
align-items: center;
justify-content: center;
}
The same can be done using CSS Grid:
body {
display: grid;
place-items: center;
height: 100vh;
}
Download my free CSS Handbook
More css tutorials:
- The Flexbox Guide
- CSS Grid Tutorial
- CSS Variables (Custom Properties)
- Introduction to PostCSS
- The CSS margin property
- How to center an element with CSS
- CSS System Fonts
- How to print your HTML with style
- An introductory guide to CSS Transitions
- A CSS Animations Tutorial
- Introduction to CSS
- The CSS Guide
- How to setup Tailwind with PurgeCSS and PostCSS
- The Tailwind Cheat Sheet
- How to continuously rotate an image using CSS
- Making a table responsive using CSS
- How to debug CSS by bisecting
- CSS Selectors
- CSS Cascade
- CSS Specificity
- CSS Attribute Selectors
- CSS Colors
- CSS Units
- CSS url()
- CSS Typography
- The CSS Box Model
- The CSS position property
- CSS Media Queries and Responsive Design
- CSS Feature Queries
- CSS Transforms
- How to style lists using CSS
- CSS Vendor Prefixes
- CSS Inheritance
- CSS Pseudo Classes
- CSS Pseudo Elements
- Styling HTML Tables with CSS
- The CSS Display property
- The CSS calc() function
- CSS Borders
- Importing a CSS file using @import
- CSS Error Handling
- CSS Filters
- CSS Box Sizing
- CSS Backgrounds
- CSS Comments
- CSS Fonts
- CSS Padding
- The CSS float property and clearing
- CSS Normalizing
- The CSS z-index property
- How to disable text selection using CSS
- How to put an item at the bottom of its container using CSS
- How to invert colors using CSS
- Responsive pre tags in CSS
- Responsive YouTube Video Embeds
- What are good CSS Breakpoint values for Responsive Design?
- How to align center in flexbox