一、行内元素-水平居中
在父元素的样式中添加：
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>三、不定宽块级元素-水平居中
三种思路：
- 加入 table 标签，将这个table居中；
- 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置；
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>以上是例子代码。
- 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的；
css居中小技巧
原文地址：http://www.cnblogs.com/cc-freiheit/p/7498585.html