文章

如何让div居中显示

隐藏侧边栏 文章2017-08-2294 人已阅来源:TONJAY-原创

昨天逛博客看到还有些同学对如何让一个模块(div)相对于父级上下左右都居中显示所有疑问,那么在这里小小总结一下我常用的模块(div)居中方法。

首先咱们假设基础html结构为:

.main{ width: 200px; height: 200px; background: #3B8DBD;}
.sub{ width: 100px; height: 100px; background: #fff;}

让div居中显示第1种方法

利用定位position来实现,加上margin就可以实现,这个就比较简单了,重点是理解margin值的负值。缺点是div.sub必须有一个固定宽高。

直接看demo

提示:你可以先修改部分代码再运行。

让div居中显示第2种方法

如果想要很好的兼容性,但是div.sub也不能固定宽高,应该只需要js来实现了,这里我用jQuery写了一个demo

提示:你可以先修改部分代码再运行。

一般情况.sub高不固定,但是宽高应该是固定或者有个最大值。你可以尝试着在上面的文本框输入更多的文字,看看会出现哪些问题?可以尝试着去解决一下

另外,可以了解一下jQuery.width()的用法。

让div居中显示第3种方法

利用定位position和css3 transform,当然了,这个属性要考虑低端ie的就不要考虑了。比较适用于移动端及pc高端浏览器(TMD,其实也不高端了,都出来好多年了,都成普通的了)的项目。这个除了兼容性没有啥缺点,div.sub想多宽就多宽,想多高就多高,随意。

直接看demo

提示:你可以先修改部分代码再运行。

让div居中显示第4种方法

利用flex布局让div.sub居中显示,这方法非常好用,兼容性也是你懂的。

提示:你可以先修改部分代码再运行。

让div居中显示第5种方法

利用display布局让div.sub居中显示。display有个属性是table-cell,作用是将此元素作为一个表格单元格显示。大家都知道table里的td内容可以设置子元素居中,看一下demo就明白了

提示:你可以先修改部分代码再运行。

这个方法支持ie8及其以上浏览器!

TONJAY原创,转载注明出处。

TONJAY

因如今网盘的各种你懂的原因,如果下载链接不可用。请加入QQ群,在群文件里进行下载,群文件找不到向群主反馈。
如果有任何问题也可以加入群中,一块讨论学习。