In our daily HTML design,  it is an easy job to horizontally center align an element with known width.

<div class="element">I am<a href="http://www.aiubug.com" target="_blank" rel="external" title=""> bug </a>！</div> 

.element{width:960px;margin:0 auto;} 

The above codes set the width of the div block and horizontally center align it. It's very easy to implement.

However, if we have some elements we don;t know their width and we still want to center align them. What should we do? The above code is not useful if we don't know the width before we center align them. Fortunately, we can use CSS to achieve what we want with some tricks.

Center align an element with unknown width

html:

<div class="demo-1"> 
    <div class="inner"> 
        <ul> 
            <li><img src="http://p1.qhimg.com/t01ee9d873b9e3a6529.jpg" alt=""></li> 
            <li><img src="http://p1.qhimg.com/t01ee9d873b9e3a6529.jpg" alt=""></li> 
            <li><img src="http://p1.qhimg.com/t01ee9d873b9e3a6529.jpg" alt=""></li> 
            <li><img src="http://p1.qhimg.com/t01ee9d873b9e3a6529.jpg" alt=""></li> 
        </ul> 
    </div> 
</div> 

css :

.demo-1{clear:both;position:relative;left:50%;float:left;} 
.demo-1 .inner{position:relative;left:-50%;text-align:center;} 
.demo-1 li{display:inline;} 

In above code, the left:50% in .deco-1 will first set the left margin of the demo-1 div to 50% of the web browser window width. For example, if the window width is 1024px, then the demo-1 div will be align at the 512px position. Then for the left:-50% in .demo-1 .inner, the inner div will align -50% left, this means it may move 50% of the width of the inner div to the left. This will make the inner div center align in the browser window.

Center align floating element

Pattern-1 : position+float

html:
<div class="demo-2"> 
    <div class="btn">Button 1</div> 
    <div class="btn">Button 2</div> 
</div>

css:
.demo-2{position:relative;left:50%;float:left;} 
.demo-2 .btn{display:inline;position:relative;float:left;right:50%;width:100px;height:26px;margin:0 2px;background-color:green;text-align:center;line-height:26px;}

pattern-2: display:table-cell;

html:
<div class="demo-3"> 
    <ul> 
        <li><a href="#">List 1</a></li> 
        <li><a href="#">List item 2</a></li> 
        <li><a href="#">list 3</a></li> 
        <li><a href="#">List item 4</a></li> 
        <li><a href="#">list 5</a></li> 
        <li><a href="#">List item 6</a></li> 
    </ul> 
</div>

css:
<!--[if lt IE 8]> 
<style type="text/css"> 
.demo-3 ul {display:inline-block;} 
.demo-3 ul{display:inline; } 
.demo-3 ul li{display:inline-block} 
.demo-3 ul li{ display:inline;} 
.demo-3 ul a{ display:inline-block;} 
.demo-3{text-align:center} 
</style> 
<![endif]--> 

.demo-3 {display:table;margin:10px auto;padding:2px;border:1px solid #000;white-space:nowrap;} 
.demo-3 ul{display:table-row;white-space:nowrap;} 
.demo-3 li{display:table-cell;} 
.demo-3 a{display:block;padding:4px 10px;border:1px solid #ff0000;background:#ffffcc;text-decoration:none;} 
.demo-3 ul a:hover{background:red;color:#fff;} 

pattern -3 : inline-block;

html:
<div class="demo-4"> 
    <ul> 
        <li><a href="#">List 1</a></li> 
        <li><a href="#">List item 2</a></li> 
        <li><a href="#">list 3</a></li> 
        <li><a href="#">List item 4</a></li> 
        <li><a href="#">list 5</a></li> 
        <li><a href="#">List item 6</a></li> 
    </ul> 
</div> 

css:

.demo-4{text-align:center;} 
.demo-4 ul{display:inline-block;*display:inline;zoom:1;} 
.demo-4 li{float:left;} 
.demo-4 li a{display:block;padding:4px 10px;border:1px solid #ff0000;background:#ffffcc;text-decoration:none;} 
.demo-4 ul a:hover{background:red;color:#fff;} 

Demo is here!

Lastly, to center align elements in HTML with CSS, these are the ways we usually use. You can propose other ways if you know them.

Source ; http://www.aiubug.com/?p=427