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