CSS Centering

To put a DIV in the center of the page horizontally, we can use:

<div id="need_center">...</div>

#need_center {
    width: 300px;
    margin: 0 auto;
}

Using margin auto as above is by far the easiest and recommended way to put a DIV in the center of the page horizontally. However, you can also use positioning and negative margin:

<div id="need_center">...</div>
#need_center {
    width: 780px;
    position:relative;
    left: 50%;
    margin-left: -390px /* half the width of the DIV */
}

Here we use position:relative, but we could also use position:absolute. We use left:50% to put the left edge of the DIV in the center of the window, and we use negative margin to pull the left edge of the DIV to the left half the width of the DIV.

To center a DIV both horizontally and vertically, we can use a similar technique:

<div id="need_center">...</div>
#need_center {
    width: 200px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px; /* half the height */
    margin-left: -100px; /* half the width */
}

To center an element of UNKNOWN WIDTH horizontally on the page:

We can use margin:auto with display:table. Unlike DIVs, and other block-level elements, by default, the browser does not stretch the width of the tables to take up the the entire width of the page. So by setting display:table, and specifying margin:auto, we effectively center the element horizontally. IE 6 and 7 does not support display:table. However, because the width of an element with position:absolute is dependent on its content, perhaps we can use position:absolute together with margin:auto. If that does not work, we may have to use CSS expression. If none of these work, consider to put the element inside a table at the cost of extra markup.

To center a floated element:

What are we really doing here? We are probably heading in a wrong direction. We are probably after "centering an element with unknown width". Centering a floated element involves the use of the position property.

To center a element of UNKNOWN WIDTH and has position:absolute:

We are talking about how to horizontally center an element of UNKNOWN WIDTH and has position:absolute here (we are not talking about vertical centering here). Not sure why we need to use an extra DIV. But the container has position:relative and overflow:hidden, and the extra DIV has position:absolute, width:200%, and left: -50%.

When position property is set to value relative, left:50% will offset the entire element by 50% of the width of the parent element. When position property is set to absolute, and width is set to auto (the default value for width), left:50% will move the left margin edge of the element by 50% of the width of the container, i.e. resizing the element. (When the element has position:absolute, its container is not necessarily its direct parent.) I think the term "offset" mean that we are indirectly specifying the width of the element based on its parent / container. For example, what is the width of an element if we don't specify its width, but we specify value for left, top, right, and bottom? If we specify only value for left, the values for top, right, bottom should be the default value of auto. The width of the child element is computed / derived from the width of the parent / container. The width of an element that has position:absolute is dependent on its content. When we specify value only for left, we are restricting the maximum width of the element. The width of the element is still not specified.

Here the negative values are not being specified for margin (we are not using negative-margin technique as above). Instead, negative values are being specified for the left property. For the left property, if we specify a positive value, it moves the entire element to the right.

I still do not see how this can truly work in all circumstances where the element has unknown width. What we are doing is restricting the maximum width of the element, and position the element based on the assumption that the element will occupy the entire width that we allow it. What if the element does not occupy the entire width that we allow?

If the element that we want to position is A, perhaps we can put it inside another element B (remove position:absolute from A, assign position:absolute to B). B should has width:100%. Maybe we need another element C between A and B. C should have display:inline-block and position:absolute (cause it to shrink according to its content). On B, we should set text-align:center. On C, we should set text-align:left.

See if margin:auto works with position:absolute.

Why all these complicated logic? Can we put our element A inside another element B (which has position:absolute), remove position:absolute from our element A, and use the "margin:auto and display:table" trick mentioned above?

Sometimes using a bit of JavaScript is acceptable if there is no other alternatives, or the alternative is two tricky.

To vertically center multi-line text: use display:table on parent element if possible or add an extra DIV as the parent of our element. This doesn't do much by itself, but then we can set display:table-cell on our element, and thus we can use vertical-align:middle on our element.

To center an image with surrounding text:

Normally, an image sits on the same line as the text (the text is lined-up with the top of the image). That may or may not be what you want. If we want the text to line up vertically with the center of the image, add vertical-align:middle to the image.

vertical-align applies only to inline elements or elements that has display:table-cell.

To vertically center a single line of text inside a fixed height container - the line-height method:

#container {
    height: 100px;
    line-height: 100px;
    white-space: nowrap;
}

Notice that line-height is applied to the container. Its value is the same as the height of the container. The white-space property is set to nowrap. Because we altered the line-height to be so large, if the text wrap on the next line, the second line would be 100px apart from the first. This is the reason why this method is only useful for single line of text or a simple inline element.

To Vertically Center A Fixed Height Block-Level Element Inside Fixed Height Container (without position:absolute):

In this simple case, where the parent contains only one element which needs to be vertically centered. We may not want to use position:absolute on the child element because it would cause the parent to collapse. In this case, we use margin-top:

div {
    height: 200px;
}
p {
    height: 50px;
    margin-top: 75px;
}

This method is only applicable if you have set height on both the container and the child element The value for margin-top is calculated: half the height of the container minus half the height of the child element.

To Vertically Center A Dynamic Height Block-Level Element Inside Dynamic Height Container:

The second element is vertically centered on the side of the first element. The second element is not on top of the first element. Here we use display:table and display:table-cell. The element that cause dynamic height for the container has a width specified. Both elements has display:table-cell so they appear as inline / floated (next to each other).

**The vertical-align property applies to table-cell element which cause block-level elements vertically centered inside it. Because of this, the child element is vertically stretched to fill the entire height of the container, and make it also vertically centered in the container.

If we need to support IE6, we may consider using actual nested tables, or floated elements, or the technique mentioned in the article. This trick use top:50% and top:-50%

Horizontal Centering
Vertical Centering
Vertically Center Multi-lined text
Centering List Items Horizontally (Slightly Trickier Than You Might Think)
Quick CSS Trick: How To Center an Object Exactly In The Center
http://exanimo.com/css/vertical-centering-with-a-floated-shim/
What is vertical-align

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License