今天学到让元素在页面中水平居中的新写法，利用了CSS3的transform属性，通过设置translate的值来改变元素的位置。
1.先来看看怎么实现的
页面中放一个div，width和height随便设置大小和背景色，以便查看效果：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>利用CSS3的transform属性让元素在页面居中</title>
6 <style>
7 .box{
8 width: 100px;
9 height: 100px;
10 background: red;
11 }
12 </style>
13 </head>
14 <body>
15 <div class="box"></div>
16 </body>
17 </html>
给元素绝对定位，让它距离上面50%，距离左边50%：
1 .box{
2 width: 100px;
3 height: 100px;
4 background: red;
5 position: absolute;
6 top: 50%;
7 left: 50%;
8 }
这时候轮到transform上场了,设置一下它的转换值translate，让它距离X轴和Y轴都为-50%，完整代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>利用CSS3的transform属性让元素在页面居中</title>
6 <style>
7 .box{
8 width: 100px;
9 height: 100px;
10 background: red;
11 position: absolute;
12 top: 50%;
13 left: 50%;
14 transform: translate(-50%, -50%);
15 }
16 </style>
17 </head>
18 <body>
19 <div class="box"></div>
20 </body>
21 </html>
一个元素就这么简单的在页面中间显示了，无论元素大小如何，都可以，so easy~
时间： 2024-11-25 14:27:36