早期时候我们左网站布局的使用表格(table)，然后使用浮动(float)、 定位(position)和内联块(inline-block)，但所有这些方法本质上来讲都是hacks，存留了很多需要实现的重要功能问题(例如，垂直居中)。
display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。display:flex的浏览器兼容性比较麻烦。
此外我还写了一个Flex布局的属性详解的文章详细的介绍了各种属性。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>登陆</title>
6 <style type="text/css">
7 html{width: 100%;height: 100%;} /*整个页面的居中*/
8 body{
9 width: 100%;
10 height: 100%;
11 display: flex; /*flex弹性布局*/
12 justify-content: center;
13 align-items: center;
14 }
15 #login{
16 width: 300px;
17 height: 300px;
18 border: 1px black solid;
19 display: flex;
20 flex-direction: column; /*元素的排列方向为垂直*/
21 justify-content: center; /*水平居中对齐*/
22 align-items: center; /*垂直居中对齐*/
23 }
24 </style>
25 </head>
26 <body>
27 <div id="login">
28 <h1>登陆</h1>
29 <input type="text"><br>
30 <input type="password"><br>
31 <button>确定</button>
32 </div>
33 </body>
34 </html>
输出结果:
原文地址：https://www.cnblogs.com/jing-tian/p/10984447.html
时间： 2024-11-05 15:49:08