h5-任意元素居中
2024-10-08 18:04:23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
border-radius: 200px;
background-color: #65ffdd;
margin: 100px auto;
position: relative;
}
.rec{
width: 100px;
height: 100px;
background-color: #7a67ff;
position: absolute;
/*定位的百分比是参照父容器的宽高*/
left: 50%;
top: 50%;
/*使用transform实现元素的居中是参考元素本身的宽高*/
transform: translate(-50%,-50%);
} </style>
</head>
<body>
<div class="box">
<div class="rec"></div>
</div>
</body>
</html>
最新文章
- MongoDB备份(mongodump)和恢复(mongorestore)
- 常用 Git 命令清单
- 在mahout安装目录下输入mahout 提示 ERROR: Could not find mahout-examples-*.job
- JQuery中国省市区无刷新三级联动查询
- 【BZOJ】【2561】最小生成树
- Sqlserver2012 评估期已过解决问题
- HDU2586 How far away ? 邻接表+DFS
- [物理学与PDEs]第1章第6节 电磁场的标势与矢势 6.1 预备知识
- powerdesigner 连接 Oracle ,并将表结构导入到powerdesigner中
- Django中间件的使用
- 用vs调式docker环境下web程序的一处坑
- 学习笔记-AngularJs(二)
- C#中winform使用相对路径读取文件的方法
- MySQL的最大连接数
- linux计划任务(二)
- 洛谷P3758/BZOJ4887 [TJOI2017] 可乐 [矩阵快速幂]
- 洛谷 P1561 [USACO12JAN]爬山Mountain Climbing
- Python程序调试-TabError: inconsistent use of tabs and spaces in indentation
- 《Andrew Ng深度学习》笔记5
- HDU 3466 Proud Merchants 排序 背包