Centring using Flexbox
See Dynamic Vertical and Horizontal Centering under the Flexbox documentation for more details on flexbox and what the styles mean.
- Flexbox is supported by all major browsers, except IE versions before 10.
- Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.
- For a quick way to generate prefixes there is Autoprefixer, a third-party tool.
- For older browsers (like IE 8 & 9) a Polyfill is available.
- For a more detailed look at flexbox browser support, see this answer.
Centering Using CSS transforms
CSS transforms are based on the size of the elements so if you don't know how tall or wide your element is, you can position it absolutely 50% from the top and left of a relative container and translate it by 50% left and upwards to center it vertically and horizontally.
Keep in mind that with this technique, the element could end being rendered at a non-integer pixel boundary, making it look blurry. See this answer in SO for a workaround.
The transform property needs prefixes to be supported by older browsers. Prefixes are needed for Chrome<=35, Safari<=8, Opera<=22, Android Browser<=4.4.4, and IE9. CSS transforms are not supported by IE8 and older versions.
Here is a common transform declaration for the previous example:
- The element is being positioned according to the first non-static parent (position: relative, absolute, or fixed). Explore more in this fiddle and this documentation topic.
- For horizontal-only centering, use left: 50% and transform: translateX(-50%). The same goes for verticalonly centering: center with top: 50% and transform: translateY(-50%).
- Using non-static width/height elements with this method of centering can cause the central element to appear squished. This mostly happens with elements containing text and can be fixed by adding: marginright: -50%; and margin-bottom: -50%;. View this fiddle for more information.
Centering Using margin: 0 auto;
Objects can be centered by using margin: 0 auto; if they are block elements and have a defined width.
Using CSS text-align
The most common and easiest type of centering is that of lines of text in an element. CSS has the rule text-align: center for this purpose:
This does not work for centering entire block elements. text-align controls only alignment of inline content like text in its parent block element.
Using position: absolute
Working in old browsers (IE >= 8)
Automatic margins, paired with values of zero for the left and right or top and bottom offsets, will center an absolutely positioned elements within its parent.
Elements that don't have their own implicit width and height like images do, will need those values defined.
Using CSS calc()
The calc() function is the part of a new syntax in CSS3 in which you can calculate (mathematically) what size/position your element occupies by using a variety of values like pixels, percentages, etc. Note: Whenever you use this function, always take care of the space between two values calc(100% - 80px).
You can also use line-height to center vertically a single line of text inside a container :
That's quite ugly, but can be useful inside an <input /> element. The line-height property works only when the text to be centered spans a single line. If the text wraps into multiple lines, the resulting output won't be centered.
Vertical align anything with 3 lines of code
Use these 3 lines to vertical-align practically everything. Just make sure the div/image you apply the code to has a parent with a height.
Centering in relation to another item
We will see how to center content based on the height of a near element.
Compatibility: IE8+, all other modern browsers.
The main points are the 3 .thumb, .details and .position-container containers:
- The .position-container must have display: table.
- The .details must have the real width set width: .... and display: table-cell, vertical-align: middle.
- The .thumb must have width: 100% if you want that it will take all the remaining space and it will be influenced by the .details width.
- The image (if you have an image) inside .thumb should have width: 100%, but it is not necessary if you have correct proportions.
Ghost element technique (Michał Czernow's hack)
This technique works even when the container's dimensions are unknown. Set up a "ghost" element inside the container to be centered that is 100% height, then use vertical-align: middle on both that and the element to be centered.
Centering vertically and horizontally without worrying about height or width
The following technique allows you to add your content to an HTML element and center it both horizontally and vertically without worrying about its height or width.
The outer container
- should have display: table;
The inner container
- should have display: table-cell;
- should have vertical-align: middle;
- should have text-align: center;
The content box
- should have display: inline-block;
- should re-adjust the horizontal text-alignment to eg. text-align: left; or text-align: right;, unless you want text to be centered
Vertically align an image inside div
Centering with fixed size
If the size of your content is fixed, you can use absolute positioning to 50% with margin that reduces half of your content's width and height:
Horizontal centering with only fixed width
You can center the element horizontally even if you don't know the height of the content:
Vertical centering with fixed height
You can center the element vertically if you know the element's height:
Vertically align dynamic height elements
Applying css intuitively doesn't produce the desired results because
- vertical-align:middle isn't applicable to block-level elements
- margin-top:auto and margin-bottom:auto used values would compute as zero
- margin-top:-50% percentage-based margin values are calculated relative to the width of containing block
For widest browser support, a workaround with helper elements:
Horizontal and Vertical centering using table layout
One could easily center a child element using table display property.
ATutorialHub Related Guide
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2
Sea battle game only using HTML and CSS
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website