CSS 實現元素在當前視窗水平垂直居中

YeRic發表於2019-09-05
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>

相關文章