如何水平居中一个元素？

参考链接：

http://www.w3cplus.com/css/elements-horizontally-center-with-css.html

1、行内元素的居中，例如想设置文本、图片等行内元素水平居中时，可以通过父元素设置text-align:center来实现，即给需要设置的元素添加一个父元素的容器，然后设置这个父元素（容器）的text-align属性即可。方法简单，原理也很容易理解，需要注意的是只能针对行内元素；

2**、宽度一定的块状元素居中**。因为是块状元素，所以就没办法运用第一种方法的text-align属性了，这次我们是通过对需要设置的元素的“左右margin”值为“auto”来实现，margin的上下值可以根据需求随意设置，但是左右一定要为”auto”！需要注意的是，在设置 margin:20px auto 之前，一定要先设置width的值，即最后的设置样例为：

div { border:2px solid red;width:100px; margin:20px auto;}

即2个像素宽的红色实体边框，整个div元素的宽度为100像素，上下距离浏览器的空白边距为20像素，左右根据内容自动调整，这样就实现了块状元素的居中显示，别忘了，要先设置width：宽度值！宽度值！宽度值！这种方法优点是简单易懂，兼容性也强，但是扩展性比较差，无法自适应未知宽度的元素。

3、宽度不确定块状元素的居中显示。这里大概也可以分为三个方法：

1）运用table标签；2）设置display:inline；3）设置position:relative和left:50%。

3.1、运用table标签。第一步：在需要设置的元素外面加上一个table标签（包括，是不是有点类似设置行内元素时添加一个父元素的容器呢？）。第二步：给这个table设置”左右margin居中”（这里又和设置定宽块状元素的方法一样了）。代码样例：

总结：就是将需要进行居中的元素，用一个大表格将其围起来（而且这个表格只有这一个单元格哦），然后设置表格的属性（如第2条方法）居中就行。不过缺点是加了不少的无用标签，代码看起来比较臃肿。

3.2、改变块级元素的display为inline类型，然后设置text-align:center来实现居中效果。代码样例：

总结：基本思想也就是将父元素（容器）先往右偏移父容器宽度的50%，然后再将列表的元素向左相对偏移50%，就可以得到居中的效果。

more：

父元素宽度已固定：

1.可以在外层加一个div，外层的div采用margin居中，里层的div设置宽度为100%。

2、设置当前div的宽度，然后设置margin-left:50%; position:relative; left:50%;其中的left是宽度的一半。

父元素宽度未知：

3.父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。

4.父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对左移动-50%。