1、盒模型垂直水平居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ overflow: hidden; height: 100%; } div{ width: 200px; height: 200px; background: yellowgreen; /* 方法一：已知盒模型大小(width、height)的情况下 position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;*/ /* 方法二：已知盒模型大小(width、height)的情况下 position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px;*/ /* 方法二：未知盒模型大小(width、height)的情况下 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%,0);*/ } </style> </head> <body> <div>44555</div> </body> </html>2、图片垂直水平居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } .wrap { height: 100%; text-align: center; } /* 该方法使用基线的原理进行设置的 */ .wrap:after{ content: ""; display: inline-block; height: 100%; /*background: red; width: 3px;*/ vertical-align: middle; } img{ vertical-align: middle; } </style> </head> <body> <div class="wrap"> <img src="img/bie.jpg"/> </div> </body> </html>
