Home/Centering An Element Horizontally And Vertically

Centering An Element Horizontally And Vertically

Published On: 9 May 2014.By .
  • Product & platform Engineering

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 :
body {
text-align:center;
}
#page-wrap {
width: 980px;
text-align:left; /*Look at it. Its only to again align the content to its default left position*/
margin: 0 auto;
}

Centering a positioned element:

position:absolute; width:400px; height:300px; left:50%; top:50%; margin-left:-200px; margin-top:-150px;

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.

position:fixed; width:400px; height:300px; left:50%; top:50%; margin-left:-200px; margin-top:-150px;

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

position:absolute; width:60%; height:auto; left:0; right:0; top:0; bottom:0;margin:auto;

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)

.block{line-height:500px; text-align:center}
.inner{line-height: normal; display:inline-block; *display:inline; *zoom:1; 
vertical-align:middle; width:30%; text-align:left; padding:5px; }
<div class="block"><div class="inner inner">Inline-Block with some lengthy 
text to show that it also works with multiple lines.</div></div>

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

For inner

{line-height: normal; display:inline-block; *display:inline; *zoom:1;vertical-align:middle; width:30%;}

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

html,body { height:100%; margin:0; }
<div class="bubble">
<div>
<span>Doing this may not be as easy or obvious as we would hope.</span>
</div>
</div>
.bubble { width: xxxpx; height: xxxpx; display: table; }
.bubble div { display: table-cell; vertical-align: middle; text-align: 
center;}
<!--[if lt IE 8]>
<style>
.bubble div { position: absolute; top:50%;}
.bubble div span {position: relative; top: -50%}
</style>
<![endif]-->

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

<!--[if lt IE 8]>
<style>
.bubble span { position: relative; margin-top: inherit;
*clear: expression(
style.marginTop = "" + (offsetHeight < parentNode.offsetHeight ?
 parseInt((parentNode.offsetHeight - offsetHeight) / 2) + "px" : "0"),
style.clear = "none", 0
);
}
</style>
<![endif]-->

Note 3: Or use the below script instead

<!--[if lt IE 8]>
<script type="text/javascript">
// make all bubbles vertically centered
var ps = document.getElementsByTagName("p");
for (var i=0;i<ps.length;i++) {
if (ps[i].parentNode.className=='bubble') {
ps[i].style.marginTop = ps[i].offsetHeight < ps[i].parentNode.offsetHeight ?
parseInt((ps[i].parentNode.offsetHeight - ps[i].offsetHeight) / 2) 
+ "px" : "0";
}
}
ps = null;
</script>
<![endif]-->

Note 4: Or use the below CSS code

.mainContainer {
 position: absolute;
 display: table;
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 text-align: center;
}
.mainContainer .vCenter {
 #position: absolute;
 display: table-cell;
 #top: 50%;
 vertical-align: middle;
 text-align: center;
}
.vCenter .heyImCentered {
 #position: relative;
 #top: -50%;
 text-align: center;
 display: inline;
 background-color: red;
 color: white;
}

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:

<div style="height: 500px;" class="block">
 <div class="centered">
 <h1>Some text</h1>
 <p>But he stole up to us again, and suddenly clapping his hand on my 
shoulder, said - "Did ye see anything looking like men going towards that ship a while ago?"</p>
 </div>
</div>
/* This parent can be any width and height */
.block {
 text-align: center;
 font-size:0 /* Adjusts for spacing */
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
 content: '';
 display: inline-block;
 height: 100%;
 vertical-align: middle;
}
/* The element to be centered, can
 also be of any width and height */ 
.centered {
 display: inline-block;
 vertical-align: middle;
 width: 300px;
 font-size:14px; /* Adjust as you want*/
}

Method 4 Not supported in older browsers (CSS3 Translators)

.inner {
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);
}

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)

position:absolute; width:400px; height:300px; left:50%; top:50%; margin-left:-200px; margin-top:-150px;

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.

position:fixed; width:400px; height:300px; left:50%; top:50%; margin-left:-200px; margin-top:-150px;

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))¶

position:absolute; width:60%; height:auto; left:0; right:0; top:0; bottom:0;margin:auto;

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.

Related content

We Love Conversations

Say Hello
Go to Top