pc端常见布局---垂直居中布局 单元素不定高
2024-10-19 21:37:52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常见元素布局</title>
<style type="text/css">
/* 一、垂直居中布局 */
/* 1.单个元素垂直居中 高度不固定*/
.content {
position: relative;
height: 100px;
background: #008000;/* height和background测试更好的观看效果 可忽略*/
} .box {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #ff9933;
color: #fff;/* background和color测试更好的观看效果 */
}
</style>
</head>
<body>
<div class="content">
<div class="box">
高度不固定
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常见元素布局</title>
<style type="text/css">
/* 一、垂直居中布局 */
/* 2.单个元素垂直居中 高度不固定 缺点：由父类控制是否居中*/
.content {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
高度不固定
</div>
</div>
</body>
</html>
效果：
最新文章
- DB2重启数据库实例
- 大牛的博客 osharp以及EF的分析
- webservice4
- Hive_初步见解,安装部署与测试
- Python 迭代删除重复项，集合删除重复项
- it小小鸟心得
- StackOverFlow的2016统计
- linux中 probe函数的何时调用的？
- “基于数据仓库的广东省高速公路一张网过渡期通行数据及异常分析系统"已被《计算机时代》录用
- EMC Isilon(OneFS)误删文件数据恢复过程<存储数据恢复>
- Apollo配置中心动态刷新日志级别
- 一、Kubernetes系列之介绍篇
- Python游戏编程入门
- scatter参数
- c#无边框窗体移动
- 学习笔记（node.js）
- javascript 高级程序设计 五
- USACO 5.5 Picture
- Is there a way to detect if call is in progress? Phone Event
- 转：vs无法调试解决方案