在设计UI的时候，垂直、水平居中显示的弹窗对用户的体验要好很多，有复杂的实现方式，比如JS检测区域宽高，然后计算实现，要写一堆的JS，但是。
文章源自陈学虎-https://chenxuehu.com/article/2021/06/7740.html
现在貌似有更简单的当时来实现，那就是CSS3的 transform 属性：文章源自陈学虎-https://chenxuehu.com/article/2021/06/7740.html
文章源自陈学虎-https://chenxuehu.com/article/2021/06/7740.html
<!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>
文章源自陈学虎-https://chenxuehu.com/article/2021/06/7740.html
再来一个例子：文章源自陈学虎-https://chenxuehu.com/article/2021/06/7740.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>
文章源自陈学虎-https://chenxuehu.com/article/2021/06/7740.html 文章源自陈学虎-https://chenxuehu.com/article/2021/06/7740.html
评论