站長(zhǎng)資訊網(wǎng)css設(shè)置垂直居中的方法：1、使用line-height屬性讓文字垂直居中；2、使用CSS3 flex布局讓文字垂直居中；3、使用絕對(duì)定位和transform讓塊狀元素垂直居中；4、使用flex布局讓塊狀元素垂直居中。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css設(shè)置文本文字垂直居中
1、line-height 使文字垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css 垂直居中</title> <style> .box{ width: 300px; height: 300px; background: paleturquoise; line-height:300px; } </style> </head> <body> <div class="box">css 垂直居中了--文本文字</div> </body> </html>
效果圖：
這樣就能讓div中的文字水平垂直居中了
2、CSS3的flex布局 使文字垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css 垂直居中</title> <style> .box{ width: 300px; height: 200px; background: paleturquoise; /*設(shè)置為伸縮容器*/ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /*垂直居中*/ -webkit-box-align: center;/*舊版本*/ -moz-box-align: center;/*舊版本*/ -ms-flex-align: center;/*混合版本*/ -webkit-align-items: center;/*新版本*/ align-items: center;/*新版本*/ } </style> </head> <body> <div class="box">css 垂直居中--文本文字（彈性布局）</div> </body> </html>
效果圖：
css設(shè)置塊狀元素垂直居中
1、使用絕對(duì)定位和transform（未知元素高度）
如果我們不知道元素的高度，那么就需要先將元素定位到容器的中心位置，然后使用 transform 的 translate 屬性，將元素的中心和父容器的中心重合，從而實(shí)現(xiàn)垂直居中：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css 垂直居中</title> <style> .box{ width: 300px; height: 300px; background: #ddd; position: relative; } .child{ background: #93BC49; position: absolute; top: 50%; transform: translate(0, -50%); } </style> </head> <body> <div class="box"> <div class="child">css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中</div> </div> </body> </html>
效果圖：
2、使用flex布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css 垂直居中</title> <style> .box{ width: 300px; height: 300px; background: #ddd; display: flex; flex-direction: column; justify-content: center; } .child{ width: 300px; height: 100px; background: #08BC67; line-height: 100px; } </style> </head> <body> <div class="box"> <div class="child">css 垂直居中了--彈性布局</div> </div> </body> </html>
效果圖：
（學(xué)習(xí)視頻分享：css視頻教程）
