如何解决html中表格内容居中

a 标签本身默认类似 css中display: inline, 即：内联元素，没有回车符。

这时，任何对a元素的配置，均无法让a标签内的文字居中对齐。只能影响 a标签整体对齐。

了解a标签的默认状态后，就很容易去用css修改它：

<a href="#" style="display: block; text-align: center;">测试</a>

显然，这时候标签内容居中了，但是，a标签占了整行内容。

如果期望仍与以前一样并不独占一行，可以修改它，让它显示为行内块元素：既符合内联元素特点，又符合块元素特点。

前面 <a href="#" style="display: inline-block; text-align: center; background: red; width: 100px;">测试</a> 后面

这里最好设置宽度，否则，和默认的情况是差不多的（当然，也可以设置padding-left 和padding-right， 甚至是height等等）。

有时候，IE较低的版本对inline-block支持度不够好。虽然非必要，但，在css中可以添加：

display: inline-block; text-align: center; background: red; width: 100px; _display: inline; zoom: 1;

display前加下划线为非标准css，IE可以识别它，其他符合W3C标准的浏览器会忽略这个设置。因此，通常情况下，也可以利用这个办法来精细的分别为不同的浏览器在同一css中进行区别设置。

一、行高（line-height）法

如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

这段代码可以达到让文字在段落中垂直居中的效果。

二、内边距（padding）法

另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：

p { padding:30px; }

这段代码的效果和line-height法差不多。

三、模拟表格法

模拟表格法其实就是用CSS中对元素的声明让块元素像表格一样显示，用到的CSS属性有display、vertical-align等。 先看下面的Html代码：

<div id="box"> <div id="content">居中显示</div> </div>

参照以上Html代码，让最外面名为box的Div呈表格样式显示，然后再让box中名为content的Div呈单元格显示，并利用vertical-align:middle让其垂直居中，这样就模拟出来和表格一样的显示方式，CSS代码如下：

#wrap { height:400px; display:table; } #content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; background:#000; width:400px; }

但这种方法有一个弊端，由于IE浏览器对高度理解会产生错误，所以这种方法仅对Firefox有效，对IE无效，既然这样，我们就需要找出对IE的修正方法，于是有了另外一种方法。

四、定位法

顾名思义，定位法是利用CSS定位属性position对元素进行定位的方法，也属于模拟方法，不过它对IE的支持还是不错的。 它的Html代码为：

<div id="box"> <div id="sub"> <div id="content">垂直居中</div> </div> </div>

这 段代码比上一种方法中多出了一个名为sub的Div，它的作用是用来定位，原理就是：首先让box出于相对定位，sub相对box出于相对定位，位于 box垂直方向的50%，再让content中的真正内容出于sub垂直方向的-50%，从而制作出content在box中垂直居中的效果，它们的 CSS代码如下：

#wrap { border:1px solid #000; background:#F00; width:400px; height:400px; position:relative; } #subwrap { position:absolute; top:50%; } #content { border:1px solid #000; position:relative; top:-50%; color:#FFF; }

这段代码无论是在IE中还是Firefox中，都能正常居中了

上下居中本身CSS没有这个属性 你可以用JS来动态调整TOP

还有一种方法就是 你在外面用一个表格套上 在在TD里面放一个表格 把TD的属性设置为上下居中 (好像默认就是) 这样就上下居中了

上面这个方法有点鸡肋 你选择下吧

恩 还有一种但是他不支持IE8以下的浏览器

就是把DIV的DISPLAY属性设置为TD的 这样就可以像调整TD一样来调整DIV了

　　1、如果是单行文字想垂直居中，只要保证div高和行高保持一致，就可以了；

　　用下面的代码即可实现：

　　代码如下：

　　2、如果是多行文字，上面的垂直居中的方法就不行了，得用变通的方法实现；这里建议使用table方法，在table外面再套上相应的div；

　　代码如下：

　　<table>

　　<tr>

　　<td style="vertical-align:middle;height:300px;background-color:red"></td>

　　</tr>

　　</table>

　　3、多行文字居中还有另外一种方法：

　　多行内容居中，且容器高度可变，也很简单，给出一致的 padding-bottom 和 padding-top 就行：

　　middle-demo-2

　　{

　　padding-top: 24px;

　　padding-bottom: 24px;

　　}