利用 CSS3 transform 实现绝对居中

老虎说测试

1540
文章

263
评论

2021 年 06 月 25 日 19:38:21前端技术字数 1114阅读3分42秒阅读模式2021 年 11 月 14 日

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

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