一、行内元素-水平居中
在父元素的样式中添加：
text-align:center;
二、定宽块级元素-水平居中
所谓定宽块级元素指块级元素的宽度指定，而不是默认的100%，否则此方法无效；
代码：
html: <body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body> css: <style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>
三、不定宽块级元素-水平居中
三种思路：
html: <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> css: <style> .container{ text-align:center; } /* margin:0;padding:0（消除文本与div边框之间的间隙）*/ .container ul{ list-style:none; margin:0; padding:0; display:inline; } /* margin-right:8px（设置li文本之间的间隔）*/ .container li{ margin-right:8px; display:inline; } </style>
以上是例子代码。
原文：http://www.cnblogs.com/cc-freiheit/p/7498585.html