盒模型 -- 将盒子垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 第一种方法 */ .demo{ width:300px; height:200px; background-color:red; position:absolute; 绝对定位 top:50%; left:50%; margin-left:-150px; 宽的一半 margin-top:-100px; 高的一半 } /* 第二种方法 */ .demo{ width:300px; height:200px; background-color:yellow; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; } </style> </head> <body> <div class="demo"> </div> </body> </html>