如何让div居中显示
昨天逛博客看到还有些同学对如何让一个模块(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
运行代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>tonjay</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head> <body> <style> .main{ width: 200px; height: 200px; background: #3B8DBD; position: relative;} .sub{ width: 100px; height: 100px; background: #fff; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px;} </style> <div class="main"> <div class="sub"></div> </div> </body> </html>
让div居中显示第2种方法
如果想要很好的兼容性,但是div.sub
也不能固定宽高,应该只需要js来实现了,这里我用jQuery写了一个demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title>tonjay</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script> </head> <script> $(document).ready(function(){ var subW = -$(".sub").width() / 2; var subH = -$(".sub").height() / 2; $(".sub").css({"margin-left":subW,"margin-top":subH}) }) </script> <body> <style> .main{ width: 200px; height: 200px; background: #3B8DBD; position: relative;} .sub{ background: #fff; position: absolute; left: 50%; top: 50%; white-space: normal;} </style> <div class="main"> <div class="sub">这是一行文字</div> </div> </body> </html>
一般情况.sub
高不固定,但是宽高应该是固定或者有个最大值。你可以尝试着在上面的文本框输入更多的文字,看看会出现哪些问题?可以尝试着去解决一下
另外,可以了解一下jQuery.width()
的用法。
让div居中显示第3种方法
利用定位position
和css3 transform
,当然了,这个属性要考虑低端ie的就不要考虑了。比较适用于移动端及pc高端浏览器(TMD,其实也不高端了,都出来好多年了,都成普通的了)的项目。这个除了兼容性没有啥缺点,div.sub
想多宽就多宽,想多高就多高,随意。
直接看demo
运行代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>tonjay</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head> <body> <style> .main{ width: 200px; height: 200px; background: #3B8DBD; position: relative;} .sub{ width: 100px; height: 100px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} </style> <div class="main"> <div class="sub"></div> </div> </body> </html>
让div居中显示第4种方法
利用flex布局让div.sub
居中显示,这方法非常好用,兼容性也是你懂的。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>tonjay</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head> <body> <style> .main{ width: 200px; height: 200px; background: #3B8DBD; display: flex; justify-content: center; align-items: center; } .sub{ background: #fff; max-width: 50%;} </style> <div class="main"> <div class="sub">这是一行文字这是一行文字这是一行文字这是一行文字</div> </div> </body> </html>
让div居中显示第5种方法
利用display
布局让div.sub
居中显示。display
有个属性是table-cell
,作用是将此元素作为一个表格单元格显示。大家都知道table
里的td
内容可以设置子元素居中,看一下demo就明白了
<!doctype html> <html> <head> <meta charset="utf-8"> <title>tonjay</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head> <body> <style> .main{ width: 200px; height: 200px; background: #3B8DBD; display: table-cell; vertical-align: middle; text-align: center; } .sub{ background: #fff; max-width: 50%; display: inline-block;} </style> <div class="main"> <div class="sub">这是一行文字这是一行文字这是一行文字这是一行文字</div> </div> </body> </html>
这个方法支持ie8及其以上浏览器!
TONJAY原创,转载注明出处。