CSS中translate實現(xiàn)水平垂直居中效果的方法-創(chuàng)新互聯(lián)

這篇“CSS中translate實現(xiàn)水平垂直居中效果的方法”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“CSS中translate實現(xiàn)水平垂直居中效果的方法”，給大家總結了以下內(nèi)容，具有一定借鑒價值，內(nèi)容詳細步驟清晰，細節(jié)處理妥當，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

為靜樂等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及靜樂網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都做網(wǎng)站、成都網(wǎng)站制作、靜樂網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

translate(-50%,-50%) 屬性：
向上和左，移動自身長寬的 50%，使其居于中心位置。

與使用margin實現(xiàn)居中不同的是，margin必須知道自身的寬高，而translate可以在不知道寬高的情況下進行居中，tranlate函數(shù)中的百分比是相對于自身寬高的百分比
(使用top和left為50%時，以窗口左上角為原點)。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
        .container {
            position: relative;
            width: 50%;
        }

        .container img {
            width: 100%;
            display: block;
            height: auto;
        }

        .overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
            transition: 0.5s ease;
            background: rgb(0, 0, 0);
        }

        .container:hover .overlay {
            opacity: 0.5;
        }

        .text {
            color: white;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <h3>淡入效果</h3>

    <div class="container">
        <img src="./img/photo2.jpg" alt="Avatar" class="image">
        <div class="overlay">
            <div class="text">Hello World</div>
        </div>
    </div>
</body>

</html>

效果：

CSS中translate實現(xiàn)水平垂直居中效果的方法

感謝你的閱讀，希望你對“CSS中translate實現(xiàn)水平垂直居中效果的方法”這一關鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領會，快去試試吧，如果想閱讀更多相關知識點的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標題：CSS中translate實現(xiàn)水平垂直居中效果的方法-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://aaarwkj.com/article2/pjhoc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、全網(wǎng)營銷推廣、自適應網(wǎng)站、移動網(wǎng)站建設、微信公眾號、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

CSS中translate實現(xiàn)水平垂直居中效果的方法-創(chuàng)新互聯(lián)