1.方法一：使用css3弹性盒子（兼容IE10及以上浏览器,firefox,chrome,safari 5.1.7不支持）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #main { display: flex; display:-webkit-flex; flex-direction:column;/*纵向排列*/ } #main div { width: 40px; height: 40px; display: flex; display:-webkit-flex; justify-content: center;/*水平居中*/ align-items: center;/*垂直居中*/ -webkit-align-items:center; } /*或者 #main div { 40px; height: 40px; display: flex; justify-content: space-around; flex-direction: column; align-items: center } */ </style> </head> <body> <div id="main"> <div style="background-color:coral;">A</div> <div style="background-color:lightblue;">B</div> <div style="background-color:khaki;">C</div> <div style="background-color:pink;">D</div> <div style="background-color:lightgrey;">E</div> <div style="background-color:lightgreen;">F</div> </div> </body> </html>
效果：
2.使用display:table-cell（不确定高度的容器中垂直居中）
display:table-cell;
vertical-align:middle;
text-align:center;
兼容性：IE8及以上浏览器，chrome,firefox
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>兼容ie8及以上浏览器</title> <style type="text/css"> .box{ width:300px; height:300px; border:1px solid red; display:table-cell; vertical-align:middle; text-align:center; } .align-center-vertical{ } </style> </head> <body> <div class="box"> <div class="align-center-vertical"> 3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问</div> </div> </body> </html>
效果：
3.利用vertical-align属性特性
ps:W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>兼容ie8及以上浏览器</title> <style type="text/css"> .box { border: 1px dashed #cccccc; height: 300px; width:500px; font-size:0; } .box p, .box i { display: inline-block; vertical-align: middle; overflow: hidden; *display:inline; *zoom:1; } .box i { height: 100%; width: 0; } .box p { font-size: 14px; width: 100%; } </style> </head> <body> <div class="box"> <p class="text">多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居</p> <i></i> </div> </body> </html>
效果：
作者：smile.轉角
QQ：493177502