关于html中css设置居中

一：水平居中 1：文本图片等行内元素居中       对其父元素设置text-align：center 2：肯定宽度的行内元素水平居中      经过设置其margin-left：0 auto，margin-right：0 auto来实现 3：不肯定宽度的块级元素居中   （1）通 过嵌套table标签来实现对table设置margin：0 auto；<table><tr><td><ul><li>内容居 中</li></ul></td></tr></table>肯定是嵌套太深，对搜索引擎 不友好，虽然简单易实现，可是笔者不推荐   （2）将ul块级元 素经过display：inline来转换成行内元素，而后使用text-align：center来实现居中，实现起来比起第一种没有了标签的嵌套，不 用增长无语意的标签，可是缺点是将块级元素转换为行内元素失去了块级元素的不少好的特性，好比当要设定长宽值，在特定的css设置中会带来一些限制   （3）设置父元素float，position：relative，left：50%；子元素设置position：relative，left：50%来实现居中，比上面两张的缺点都没有了，可是缺点就是设置了position：relative会带来一些反作用。

二：竖直居中 1：父元素高度不肯定的文本，图片块级元素的竖直居中    经过设置父元素的margin-top和margin-buttom相同的上下边距实现 2：父元素高度肯定的单行文本竖直居中    给父元素设置line-height值和父元素高度相同来实现 3：父元素高度肯定的多行文本，图片，块级元素的竖直居中   （1）嵌 套<td>或<th>标签设置vertical-algin来实现，还能够设置其它块级元素div，p的 display：table-cell啦激活ertical-algin，可是在IE6,IE7中没法激活，因此只有经过嵌套<td>或<th>标签来实现，td标签的默认vertical-algin值为middle。   （2）对 第一种的改进，对于IE6,IE7不兼容display：table-cell，改进方法能够用hack技术来实现，因为要两层嵌套div设置 top：-50%和top：50%来实现居中，还要设置position：relative，这种方法缺点是嵌套太深，还设置了hack不利于维护，还要 设置position：relative和position：absolute，带来反作用，不推荐。