css实现元素在当前窗口水平垂直居中

最新推荐文章于 2022-11-21 21:02:08 发布

看到了你

最新推荐文章于 2022-11-21 21:02:08 发布

阅读量1k

点赞数 3

分类专栏： html 文章标签： css translate 页面居中

本文链接：https://blog.csdn.net/chen1042246612/article/details/95597713

版权

html 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>translate</title>
    <style>
        .bg{
            //父级盒子高度设置大点方便看出效果
            height: 1000px;
        }
      
        .center{
             /*background: red;*/
            /*设置绝对定位，让此元素基于浏览器进行变化*/
            position: absolute;
            /*此处有一个易犯错的地方，此时设置的‘50%’是基于谁的。*/
            /*因为已经设置了绝对定位，该元素已经脱离了他之前的父元素，也就是说它现在的父元素是 
              当前的浏览器窗口，所以‘50%’是当前窗口大小的一半*/
            left: 50%;
            top: 50%;
            /*使用translate将元素往后退自己大小的一半 这里的‘50%’是该元素大小的一半*/
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            transform:translate(-50%,-50%);
            background: red;
        }
    </style>
</head>
<body>
    <div class="bg">
         <div class="center">translate绝对居中</div>
    </div>
</body>
</html>

看到了你

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css实现元素在当前窗口水平垂直居中

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>translate</title> <style> .bg{ //父级盒子高度设置大点方便看出效果 ...
复制链接

扫一扫