Centering An Element Horizontally And Vertically

Horizontally Centering an element

1. Normally text and other inline elements like img tag and inline-block elements align in center by putting text-align:center on their parent div.
2. But if we want to align horizontally center a display:block element, then

• It must have a fixed width or a width in percentage

• Width must be less than the screen size or its outer container size (After including margin+padding)(If box-sizing:border-box not applied ^1)

• Now put margin:0 auto;(If it suits you… Top-bottom margin are 0 here change it according to your requirement. Means margin-left and margin-right should be auto)Put it on the div/element which you want to place in center.

• If want to support it in IE6 and below, we have to put text-align:center to its parent div. For an example if we want to center the whole page wrapper in body then :

Centering a positioned element: Here the parent div must be position:relative so that the child div take its position according to its parent. Now left: 50% will move it 50% in right of its parent container and 50% top will move it vertically 50% below from its parent’s height. So the point will be actually the center point of its parent div horizontally and vertically. Now the negative margin-left and margin-top will take it backward and upward, so its value must be in pixel and must be half of its width and height respectively. So it is a must in this case that we know element’s exact width and height.

Position:fixed element will also work same, using the above method and will display exactly in the middle of screen.

When we don’t know element’s exact width and height (Not Supported below and equal to IE7 (Unpredictable behavior Padding and Margin sets according to FontSize))

Here left:0 will move it in extreme left and right:0 will take it to extreme right, but its width:60% will not allow it to do so and margin:auto will solve its problem and it put equal margin in both the sides. The position:fixed will also work same as per screen size. The condition that width must be less than the screen size or its outer container size remains same for this situation also.

Vertically Centering an element

Method 1 for single-line text, like on a button, navbar, tabs etc. (Line-height Method)

Just put the line-height equal to its container’s height

Method 1B for Multi-line text, When we know parent (Container’s) Height.

(Line-height Method, Wonderful Method)

Here .block’s line-height:500px; is the height of container, which is required.

For inner

are required elements. All other are formatting.

Method 2 for Multi-line text(Display table-cell Method)

Note for all the methods below

If vertically-center is not happening in your document after applying all these methods, try

Note 1: Above style can also be placed in separate IE7 specific file And with the help of modernizer now we can put all css in a single file too

Note 2: Or use the below expression instead

Note 3: Or use the below script instead

Note 4: Or use the below CSS code

Method 3 (With Ghost Element inside the parent that is 100% height)

Why Required Sometimes we cannot use display:table and display:table-cell method because we have some other floated content inside display:table-cell entity and with floated elements vertical-align not works. Like we want to display an image with title and text in center so the bunch may be floated so now putting display:table-cell to the outer div will not work. Solution goes as follows:

Method 4 Not supported in older browsers (CSS3 Translators)

Method 5 Not supported in IE7 and 6 (Centering a positioned element)

Only applicable if we know its width / height (Supported Till IE6 or 7)

Here the parent div must be position:relative so that the child div take its position according to its parent. Now left: 50% will move it 50% in right of its parent container and 50% top will move it vertically 50% below from its parent’s height. So the point will be actually the center point of its parent div horizontally and vertically. Now the negative margin-left and margin-top will take it backward and upward, so its value must be in pixel and must be half of its width and height respectively. So it is a must in this case that we know element’s exact width and height.

Position:fixed element will also work same, using the above method and will display exactly

in the middle of screen.

When we don’t know element’s exact width and height (Not Supported below and equal to IE7 (Unpredictable behavior Padding and Margin sets according to FontSize))¶

Here left:0 will move it in extreme left and right:0 will take it to extreme right, but its width:60% will not allow it to do so and margin:auto will solve its problem and it put equal margin in both the sides. The position:fixed will also work same as per screen size. The condition that width must be less than the screen size or its outer container size remains same for this situation also.