垂直居中佈局的一百種實現方式（更新中...）
阿新 • • 發佈：2018-12-09
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="[email protected] xing.org1^"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>translateY實現垂直居中</title> <style> html, body, ul { height: 100%; margin: 0; } .mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); } .layer { position: absolute; top: 50%; left: 50%; /* transform: translateX(-50%) translateY(-50%); 這種寫法也可以，相當於寫兩個translate*/ transform: translate(-50%,-50%); text-align: center; background: #fff; border-radius: 8px; } .box { /* width: 500px;*/ /* height: 350px; */ padding: 30px 10px; background: rgba(255, 51, 255, 0.2901960784313726); } </style> </head> <body> <h1>我是body裡的內容，哦吼吼！xing.org1^</h1> <h1>translate負值實現元素的水平垂直居中</h1> <!-- 蒙層 --> <div class="mask"> <!-- 彈層 - 垂直居中實現 --> <div class="layer xingorg1"> <div class="box"> <ul> <li>關鍵點</li> <li>left: 0; right: 0; bottom: 0; margin: auto;</li> <li>top: 50%;</li> <li>transform: translateY(-50%);</li> <li>這些li是為了撐開box的高度</li> </ul> </div> </div> </div> </body> </html>