html,body区域添加一个水平垂直居中的盒子
1 <!DOCTYPE html>
2 <html >
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>自己经常喜欢写一些测试代码，就希望在显示器的正中显示该盒子，其实就是这么简单的一段代码，还有使用传统的方式来实现居中的，有时间写写
- 上一篇 »css3实现水平、垂直居中
- 下一篇 »CSS小技巧