利用css3 transform优雅实现元素定位在屏幕正中央

来源：互联网发布：粒子群算法优缺点编辑：程序博客网时间：2024/05/17 01:09

通常如果想要实现某个元素定位在屏幕的正中央，比如loading图片，我们是根据元素以及屏幕的大小人为计算，或者使用js，显然这两种方法都不够优雅，或者兼容性不好，这里向大家介绍一种个人认为不错的方案供参考。

代码如下：

<!DOCTYPE html><html><head lang="zh-CN">    <meta charset="UTF-8">    <title>transform</title>    <style>        html,body,div,p,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{            margin: 0;            padding: 0;        }        html,body{            height: 100%;        }        div {            width: 300px;            height: 300px;            background: -webkit-linear-gradient(top, wheat, #28a4c9);            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%); /*向左向上分别平移自身的一半*/            -webkit-transform: translate(-50%, -50%);            -moz-transform: translate(-50%, -50%);            text-align: center;            transition: 1s;        }        div:hover {            width: 550px;            height: 550px;            background: -webkit-linear-gradient(top, #28a4c9, wheat);            transition: 1s;        }    </style></head><body>    <div>居于屏幕中央，而且不受屏幕分辨率影响</div></body></html>

效果如下：

注意： transform属于css3的属性，某些低级浏览器可能不支持

0 0