jetbrains maven Java开发手册 golang firebase flask post odbc jquery的each遍历方法 android富文本框架 java通用版qq浏览器下载 python编程练习题 excel被保护怎么解除 centos查看python版本 mysql时间戳转时间 linux查询文件内容 python加法 python中count python操作mysql java的数据结构 java怎么连接数据库 java时间转换 java怎么编译 java中文文档 java字符串相等 java函数调用 linux命令 php实例代码 圣剑世界 微信签名一句话至自己 催眠魔蛙 pr蒙版 ip切换软件 英雄联盟设置 js代码混淆工具 sdm439 手工画像 babelrc pr蒙版怎么用 win98序列号
当前位置: 首页 > 学习教程  > 编程语言

css3习题(使用css3属性transform中translate函数让绿色盒子在红色盒子里垂直水平居中)

2020/8/31 14:03:36 文章标签:

以下是html页面的代码:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国的流浪猫</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #ccc;
        }
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .con {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50px;
            height: 50px;
            background-color: green;
            transform: translate(-50%, -50%);
            transition: all .5s;
        }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="con"></div>
    </div>
</body>

</html>

本文链接: http://www.dtmao.cc/news_show_150162.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?