提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

css 利用transform 实现页面居中效果

CSS 实现 利用 页面 效果 居中 transform
2023-09-11 14:20:09 时间

1.代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             
12             div{
13                 /* width: 100px;
14                 height: 100px; */
15                 background-color: #bfa;
16                 position: absolute;
17                 left: 50%;
18                 top: 50%;
19                 transform: translateX(-50%) translateY(-50%);
20             }
21         </style>
22     </head>
23     <body>
24         <div>dgjhio</div>
25     </body>
26 </html>

2.图片

 

 

 

 

讲解

1.不论对设置了宽高和没有设置宽高的快元素，而且已经开启了定位，相对包含块元素定位，设置left: 50%;top:50%; 然后利用translateX(-50%) translateY(-50%); 移动自身的宽高各50%，

则该元素位于网页正中央。

相关文章