| 标题 | 关于html水平垂直居中的问题小结 |
| 内容 | 最近遇到很多居中的问题，就花点时间总结了一下放在这里，以后找也方便 1.居中文本 代码如下: <div> 我在中间…… </div> .. height+line-height+text-center（只能居中单行） .wrap{ width:px; height:px; border:px solid red; text-align: center; line-height: px; } ps:text-align:center只是将元素下面的内联元素居中显示 1.2display:table-cell(多行固定高度居中) 代码如下: .wrap{ width:px; height:px; border:px solid red; text-align: center; display:table-cell; vertical-align: middle; } display:table-cell：ie67不管用,最好配合display:table;一起用 ie67下：（以后也不用了，不过也放这儿吧） 方法一：（通过em标签高度与父级等高，所以span和em居中就相当于span在父级居中） 代码如下: <div> <span> 我在中间…… 我在中间…… 我在中间…… 我在中间…… </span> <em></em> </div> .wrap{ width:px; height:px; border:px solid red; text-align: center; } .wrap span{ vertical-align: middle; display:inline-block; width:px; } .wrap em{ height:%; vertical-align: middle; display:inline-block; } 方法二：（通过给子元素增加一个绝对定位的父级标签，再配合子元素的相对定位水平垂直居中） 代码如下: <div> <span> <span>我在中间…… 我在中间…… 我在中间…… 我在中间……</span> </span> </div> .wrap{ width:px; height:px; border:px solid red; display:table; position:relative; overflow: hidden; } .wrap .span{ display:table-cell; vertical-align: middle; text-align: center; *position:absolute; top:%; left:%; } .wrap .span{ *position:relative; top:-%; left:-%; } 1.3padding（内填充，不用多说） 代码如下: .wrap{ width:px; border:px solid red; padding:px ; } 2.居中元素 代码如下: <div> <span></span> </div> 2.1position:absolute+margin负值（必须要有宽高，才能计算margin） 代码如下: .wrap{ width:px; height:px; position:absolute; top:%; left:%; margin-top:-px; margin-left:-px; border:px solid red; } .wrap span{ width:px; height:px; background:red; position: absolute; top:%; left:%; margin-top:-px; margin-left:-px; } ps：CSS实现DIV水平居中和上下垂直居中 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>上下垂直居中 在线演示 DIVCSS5</title> <style> #main { position: absolute; width:400px; height:200px; left:50%; top:50%; margin-left:-200px; margin-top:-100px; border:1px solid #00F } /*css注释：为了方便截图，对CSS代码进行换行*/ </style> </head> <body> <div id="main">DIV水平居中和上下垂直居中<a href="http://www.divcss5.com/">DIVCSS5</a></div> </body> </html> 水平垂直居中原理介绍 这里使用了绝对定位position:absolute，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left:-200px;margin-top:-100px;，这里有个技巧是，margin-left的值是宽度一半，margin-top的值也是对象高度一半，同时设置为负，这样就实现了水平和垂直居中。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。