场景一：一块区域，点击是超链接跳转，超链接a标签里有文字，文字多少未知，但是不管文字多少都要垂直居中
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中 - 文字</title> </head> <style> body,p{ margin: 0; padding: 0; } .container{ display: table; height: 200px; width: 200px; } .wrap{ display: table-cell; vertical-align: middle; border:1px solid #FF0099; background-color:#FFCCFF; text-align: center; } </style> <body> <div class="container"> <a class="wrap" href="javascript:;"> 水平垂直居中 - 文字 </a> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中 - 文字</title> </head> <style> body,p{ margin: 0; padding: 0; } .container{ display: table; height: 200px; width: 200px; } .wrap{ display: table-cell; vertical-align: middle; border:1px solid #FF0099; background-color:#FFCCFF; text-align: center; } .wrap p{ width: 198px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } </style> <body> <div class="container"> <a class="wrap" href="javascript:;"> <p>水平垂直居中水平垂直居中水平垂直居中水平垂直居中</p> </a> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中 - 文字</title> </head> <style> body,p{ margin: 0; padding: 0; } .container{ display: table; height: 200px; width: 200px; } .wrap{ display: table-cell; vertical-align: middle; border:1px solid #FF0099; background-color:#FFCCFF; text-align: center; } .wrap p{ width: 198px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break:break-all; } </style> <body> <div class="container"> <a class="wrap" href="javascript:;"> <p>水平垂直居中水平垂直居中水平垂直居中水平垂直居中水平垂直居中水平垂直居中水平垂直居中水平垂直居中</p> </a> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中 - 图片</title> </head> <style> body,p{ margin: 0; padding: 0; } .container{ display: table; height: 200px; width: 200px; } .wrap{ display: table-cell; vertical-align: middle; border:1px solid #FF0099; background-color:#FFCCFF; text-align: center; } .wrap img{ width: 125px; height: 125px; vertical-align: top; } </style> <body> <div class="container"> <a class="wrap" href="javascript:;"> <img src="http://moxiaofei.com/wp-content/uploads/2018/04/h5c3.jpg" alt=""> </a> </div> </body> </html> |
场景二：一块区域，内容有多个a链接，始终垂直居中
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中 - 多个a链接 </title> </head> <style> body,p{ margin: 0; padding: 0; } .container{ width: 200px; height: 200px; border: 1px solid #000; display: flex; justify-content: center; align-items: center; text-align: center; box-sizing: border-box; padding: 0 10px; margin: 50px auto; } .wrap{ width: 100%; } .wrap p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } </style> <body> <div class="container"> <div class="wrap"> <p><a href="javascript:;">有梦就要去追有梦就要去追有梦就要去追</a></p> <p><a href="javascript:;">有梦就要去追有梦就要去追有梦就要去追</a></p> <p><a href="javascript:;">有梦就要去追有梦就要去追有梦就要去追</a></p> </div> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中 - 文字 </title> </head> <style> body,p{ margin: 0; padding: 0; } .container{ width: 200px; height: 200px; border: 1px solid #000; position: relative; } .container a{ width: 100%; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); text-align: center; } </style> <body> <div class="container"> <a href="javascript:;">有梦就要去追</a> </div> </body> </html> |
