利用 CSS3 transform 实现绝对居中

陈学虎 2021 年 06 月 25 日19:38:21 1114字阅读3分42秒
摘要

在设计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>

 

再来一个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.content {
    position: relative;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    border-radius: 10px;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    border: 1px solid #666;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    background: #666;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #666;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="content">
    <div class="box">
        <p>居中文字</p>
    </div>
</div>
</body>
</html>

 

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