Tutorial by Examples

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...

HTML: <div class="container"> <img src="http://lorempixel.com/400/200" /> </div> CSS: html, body, .container { height: 100%; } .container { display: flex; justify-content: center; /* horizontal center */ } img { align-self: center; /...

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. View Result HTML <div class="parent"> <img class="center" src=&quo...

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. CSS /* This parent can be any width and height */ .block...

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: HTML <p>Lorem ipsum</p> CSS p { text-align: center; } This does not work for centering entire block elements. text-align controls onl...

We will see how to center content based on the height of a near element. Compatibility: IE8+, all other modern browsers. HTML <div class="content"> <div class="position-container"> <div class="thumb"> <img src="http://lorempix...

Supported by IE11+ View Result 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. CSS div.vertical { position: relative; top: 50%; transform: translateY(-50%); } HTML <div class="vertica...

HTML <div class="wrap"> <img src="http://lorempixel.com/400/200/" /> </div> CSS .wrap { height: 50px;/* max image height */ width: 100px; border: 1px solid blue; text-align: center; } .wrap:before { content:""; di...

One could easily center a child element using table display property. HTML <div class="wrapper"> <div class="parent"> <div class="child"></div> </div> </div> CSS .wrapper { display: table; vertica...

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% -...

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 ...

You can also use line-height to center vertically a single line of text inside a container : CSS div { height: 200px; line-height: 200px; } 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 ...

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-al...

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: HTML <div class="center"> Center vertically and horizontally </div> CSS .center { position: absolute; background...

Objects can be centered by using margin: 0 auto; if they are block elements and have a defined width. HTML <div class="containerDiv"> <div id="centeredDiv"></div> </div> <div class="containerDiv"> <p id="centeredPara...