css實現多行文字在容器內垂直居中
阿新 • • 發佈：2019-01-03
提供兩種方法line-height和flex佈局方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文字固定容器居中</title> <style type="text/css"> .box1 { background-color: #ccc; width: 300px; height: 800px; margin: 100px auto; line-height: 800px; } .box1 span { display: inline-block; line-height: 20px; vertical-align: middle; } .box { display: flex; width: 500px; height: 800px; margin: 50px auto; border: 2px solid #000; align-items: center; /*垂直軸居中*/ } .box span { /*span是另一個flex佈局容器，它本身將自適應填滿除p元素外的寬度*/ flex: 1; display: flex; justify-content: center; /*水平軸居中*/ } </style> </head> <body> <!--line-height--> <div class="box1"> <span>多行居中測試多行居中測試多行居中 測試多行居中測試多行居中測試多行居中測試多行居中測 試多行居中測試多行居中測試多行居中測試多行居中測試多行居中 </span> </div> <!--flex佈局--> <div class="box"> <span>span多行居中測試span多行居中測試span多行居中測試span多行居中測試span多行居中測試span多行居中測試span多行居中測試span多行居中測試span多行居中測試span多行居中測試span多行居中測試span多行居中測試</span> </div> </body> </html>