利用 CSS3 transform 实现绝对居中

陈学虎 2021 年 06 月 25 日19:38:21 488字阅读1分37秒
摘要

在设计UI的时候,垂直、水平居中显示的弹窗对用户的体验要好很多,有复杂的实现方式,比如JS检测区域宽高,然后计算实现,要写一堆的JS,但是。

在设计UI的时候,垂直、水平居中显示的弹窗对用户的体验要好很多,有复杂的实现方式,比如JS检测区域宽高,然后计算实现,要写一堆的JS,但是。

利用 CSS3 transform 实现绝对居中

现在貌似有更简单的当时来实现,那就是CSS3的 transform  属性:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #CT_Window{
            position : fixed;
            left : 50%;
            top : 50%;
            max-width : 500px;
            max-height : 600px;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="CT_Window" style="border:1px solid purple;">
        不管怎么样,我都会居中显示
    </div>
</body>
</html>

 

 

  • 免费优惠券
  • 免费领取优惠券
  • weinxin
  • 品质与测试
  • 关注品质与测试
  • weinxin
  • 版权声明:本文为原创文章,转载请附上原文出处链接及本声明。
  • 转载请注明:利用 CSS3 transform 实现绝对居中 | https://chenxuehu.com/article/2021/06/7740.html