transform: translate(-50%, -50%) 實現塊元素百分比下居中

本文轉載自查看原文 2017-03-01 15:50 3365 CSS3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position & transform: translate(-50%, -50%) 實現塊元素百分比下居中</title>
<style>
html,body {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .box {
        width: 800px;
        height: 500px;
        background-color: #FFD914; 
    }
    .inside {
        width: 60%;
        height: 30%;
        background-color: red;
    }
    .center { 
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
</head>
<body>
    <div class="box center">
        <div class="inside center"></div>
    </div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用百分比的div如何居中顯示 transform：translate(-50%,-50%) 水平垂直居中 css實現圓形百分比進度條 js 實現加載百分比效果純CSS實現餅圖、環形圖（百分比） transform:translate -50%解釋 Java 數字轉百分比% oracle百分比計算流式布局（百分比布局） js計算百分比