垂直水平居中
阿新 • • 發佈：2021-01-09
最近做專案都是自適應的總是遇到的需要水平垂直居中來展示模組兒。具體效果看圖片：
一般都是用了定位，然後讓他居中來展示
父級： position:relative;
子級：position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
然後問同事找到了另外的一個方法，具體程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html,body{ width: 100%; height: 100%; } .box { width: 100%; height: 100%; background: red; /* BEGIN 垂直居中 */ display: flex; flex-direction: column; justify-content: center; /* END 垂直居中 */ } .main { width: 200px; height: 200px; background: palegoldenrod; /* 如果水平也需要居中 */ margin: 0 auto; } </style> </head> <body> <div class="box"> <div class="main"></div> </div> </body> </html>