html,body區域添加一個水平垂直居中的盒子

時間 2019-11-29

標籤 html body 區域添加一個水平垂直居中盒子欄目 HTML 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css" media="screen">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         html,body{
12             width: 100%;
13             height: 100%;
14         }
15         body{
16             display: flex;justify-content: center;align-items: center;
17         }
18         .box{
19             width: 500px;
20             height: 500px;
21             border: 1px solid #ccc;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="box">
27         
28     </div>
29 </body>
30 </html>

本身常常喜歡寫一些測試代碼，就但願在顯示器的正中顯示該盒子，其實就是這麼簡單的一段代碼，還有使用傳統的方式來實現居中的，有時間寫寫css

相關標籤/搜索