设置居中的方法

HTML中设置水平居中的几种方法：

居中的元素可以分为：行内元素和块状元素，其中块状元素又定宽块状元素和不定宽块状元素。

常见行内元素有： <span>标签，<br>标签，<i>标签，<em>标签，<strong>标签，<q>标签，<code>标签，<a>标签

常见块级元素为：<p>标签，<hx>标签，<hr>标签，<div>标签，<ul>标签，<ol>标签，<table>标签，<form>标签

1.对于行内元素，如果被设置居中的元素是文字或者图形的形式，那就需要通过给父元素设置text-align：center来实现

2.对于定宽的块级元素，使用text-align：center就无效了。这里如果需要设置居中，则必须通过设置左右两边的margin值为“auto”来实现。auto的意思是自动分配剩余空间，margin：10px auto是margin-top：10px；margin-bottom：10px；margin-left：auto；margin-right：auto；的缩写形式。所以左右两边元素剩余区域各自均分，也就是元素两侧的区域各自占50%，那么元素就左右居中了。

3.对于宽度不固定的块级元素，通常有3种方式来实现居中： 

first ：通过table元素来实现（table元素具有长度自适应性，其长度根据其内文本长度决定，因此可以看做一个定宽度块元素。然后结合上面的定宽块级元素居中方法就可以设置居中了。 缺点是：会生成无语义的代码）

second：设置display：inline方法，将显示类型设为行内元素（该方法用于居中不定宽块级元素则更好理解，通过将元素设置为行内元素，设置行内元素的父元素属性text-align：center就可以实现居中  缺点是：由于转换成了行内元素，导致元素损失了块级元素具有长度值等属性）

third：设置position：relative，利用相对定位的方式，将元素向左偏移50%来实现居中。（该方法利用相对定位的方式来居中不定宽块级元素，首先给父元素设置float属性，float：left；然后给父元素设置relative定位属性和left：-50%，这样就能实现居中）