当我们给容器高度设置为百分比时,想让其中的文字垂直居中
如果设置line-height:100%;效果如下:并没有什么作用
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{padding:0px;margin:0px;} body,html{width:100%;height:100%;} .parent{height:80%;width:50%;margin:0 auto;} .son{height:10%;text-align:center;line-height:100%;border:1px solid darkslategray;} </style> </head> <body> <div class="parent"> <div class="son">垂直居中内容</div> </div> </body> </html>目前我采用的方法是父元素使用display:table;子元素使用display:table-cell;vertical-align:middle;
效果图如下:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{padding:0px;margin:0px;} body,html{width:100%;height:100%;} .parent{height:80%;width:50%;margin:0 auto;} .son{height:10%;width:100%;text-align:center;border:1px solid darkslategray;display:table;} .son span{display:table-cell;vertical-align:middle;} </style> </head> <body> <div class="parent"> <div class="son"><span>垂直居中内容</span></div> </div> </body> </html>