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

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

<!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>

css 水平垂居中 css水平垂居中