CSS水平居中设置总结

1. 行内元素水平居中
   当被设置元素为文本、图片等行内元素时，要实现其水平居中显示，给父元素设置 text-align:center 即可。

2. 定宽块状元素水平居中
   父元素设置 text-align:center 对块状元素不起作用。
   如果元素为定宽块状元素，可以 通过设置元素本身的左右margin值为“auto”来实现居中的。auto表示根据宽度左右自适应（居中）。

3. 不定宽块状元素水平居中

   • 加入table标签
     table标签具有宽度自适应性–即不定义其宽度时，也不定义其父元素的宽度时，table的宽度根据其内文本的宽度决定。因此可以将不定宽的table看做一个定宽度块状元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。将需要设置的居中的元素放入 table 标签中 ( 包括 <tbody>、<tr>、<td> )。如下：

     <style>    table{       border:1px solid;       margin:0 auto;    }</style><div> <table>  <tbody>    <tr><td>    <ul>        <li>我是需要居中显示的不定宽元素</li>        <li>我是需要居中显示的不定宽元素</li>    </ul>    </td></tr>  </tbody> </table></div>

   • 设置 display: inline

     改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后给父元素设置 text-align:center 来实现居中效果。
     这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

   • 设置 position:relative 和 left:50%

     1. 给父元素设置 float:left（让父元素具有包裹性，父元素的宽度为其内元素的宽度）；
     2. 然后给父元素设置 position:relative 和 left:50%，父元素向右偏移其父元素尺寸的一半；
     3. 子元素设置 position:relative 和 left: -50% ，即子元素向左偏移父元素的尺寸的一半。从而实现水平居中。