第一种方法是利用 margin 值, 无论怎样改变浏览器的窗口大小它都会垂直剧中.
html 代码片段
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title > 块元素相对浏览器垂直剧中的问题 </title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- .box {
- background-color: #000;
- width: 200px;
- height: 200px;
- margin: 250px auto;
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </HTML>
第二种方法是利用 position 进行定位.
HTML 代码片段
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title ></title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- .box {
- background-color: #000;
- width: 200px;
- height: 200px;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-left: -100px;
- margin-top: -100px;
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </HTML>
对于第二种方法来说, 因为 body 边只有一个块元素, 此时不管用 absolute 还是 absolute, 除了上间距有一点不一样, 其他代码是一样的, 都会垂直剧中.
刚开始学习前端, 希望每天记笔记的习惯可以坚持下去, 想把学习的知识一点点累积起来.
来源: http://www.qdfuns.com/article/20749/8c7e0223c68c610b8a0c5413e924596c.html