css中div中的内容居中

第一种使用table标签（很少用）

css代码

/*使用table包裹要居中的元素，因为table有自适应的设置然后将table居中即可。 

*/table{margin: 0px auto;}

html中的代码

<div><table><tbody><tr><td><ul><li>这个内容是使用table自动居中的1</li><li>这个内容是使用table自动居中的2</li><li>这个内容是使用table自动居中的3</li></ul></td></tr></tbody></table></div>

第二种、将div变成行级元素然后使用text-align:center来居中

css代码

.container{background: gray;/*实现的方法就是将这个块级元素变成行级元素，然后将这个行级元素里面的内容居中所以会显示的居中 */display: inline;text-align: center;}

html代码

<div class="container"><div>这个是一个没有指定宽度的div,要让它自动居中</div></div>

第三种方式 、集合float、position、left来完成

css代码

/*第三种居中方式就是将父类元素定义成position: relative;float: left;left: 50%;子类元素定义的一样，只是将这里的left: -50%;*/.three{position: relative;float: left;left: 50%;background: pink;}.threeCenter{position: relative;float: left;left: -50%;background: green;}

html代码

<div class="three"><div class="threeCenter">这是第三种居中的方式</div></div>

第四种方式、使用position、left、top、translate来完成

css代码

.four{position: relative;background: yellow;left: 50%;top: 50%;}.fourChild{position: absolute;transform: translate(-50%, -50%);}

html代码

<!-- 第四种方式--><div class="four"><div class="fourChild">第四种方式居中方式..</div></div>

效果如下：