html表格居中代码

1、首先打开vscode编辑器，新建一个html文档，里面写入一个外层的div，再加入一行table表格：

2、然后在上方的style标签中加入css样式，设置table标签的样式，table的元素具有长度自适应性，其长度根据其内文本长度决定，只要设置margin属性，让左右设置为auto就回自动分配剩余空间，也就是元素两侧的区域各占50%，那么元素就左右居中了：

3、最后打开浏览器就可以看到居中的一行表格了：

html中对多个内容进行居中有以下几种方法：

1、外面用<center></center>包着,虽然这个标签未来是被淘汰的，但是记得很多时候有一些奇效。

2、外面加一个div，可以带着id，然后设置样式的时候，要增大其权重，最好能抵消掉里面每个元素自身样式的权重。所以，可以考虑用“!important”这个标签。（自行搜索用法，当然这个标签一般情况下，也不推荐使用，也存在一定的浏览器兼容问题。）

示例代码：

<div id="wrap">

<!--你的调整好的html内容放这里面-->

</div>

<style>

/*css 样式 */

#warp { text-align:center!important}

#warp p{text-align:center!important}

#warp div{text-align:center!important}

/*  .....类似思路....... */

</style>

3、使用js加css *** 作，原理就是循环每一个元素，将div的一些影响布局的属性值进行修改，新增新的css样式。 这个是没办法的办法，不一定好使，也比较麻烦， *** 作慢了，页面也能看清楚div抖动等情况。

4、从工作内容改进，可以将你的html代码，放入一些常见的编辑器中进行调整。比如使用：fckeditor 、百度的ueditor。调整好代码，再拷贝源码就行了。

行级元素用 text-align: center

块级元素用 margin: 0 auto(注意设置宽度width)

背景水平居中用: background: url("bg.jpg") no-repeat scroll center 0 tansparent

---