div 居中方法汇总
2024-09-01 09:35:30
本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记
情况一: 父子容器宽高已知
方法一
- html
<div class="father">
<div class="son"></div>
</div>
- css
.father {
position: relative;
width: 1000px;
height: 600px;
background: lightblue;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background: yellow;
top: 50%;
margin-top: -50px; /* 高度的一半 */
left: 50%;
margin-left: -50px; /* 宽度的一半 */
}
方法二
利用 margin: auto; 自动分配多余空间
- html
<div class="father">
<div class="son"></div>
</div>
- css
.father {
position: relative;
width: 1000px;
height: 600px;
background: lightblue;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background: yellow;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
top、left、right、bottom 的值相等即可，不一定要都是0
方法三
用 Flex 布局
- html
<div class="father">
<div class="son"></div>
</div>
- css
.father {
width: 1000px;
height: 600px;
background: lightblue;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.son {
width: 100px;
height: 100px;
background: yellow;
}
情况二: 父子容器宽高未知
方法一
- html
<div class="father">
<div class="son"></div>
</div>
- css
.father {
position: relative;
width: 1000px;
height: 600px;
background: lightblue;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background: yellow;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
方法二
用 Flex 布局
- html
<div class="father">
<div class="son"></div>
</div>
- css
.father {
width: 1000px;
height: 600px;
background: lightblue;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.son {
width: 100px;
height: 100px;
background: yellow;
}
还有其他方法的小伙伴们欢迎补充 谢谢!
最新文章
- sql-ASCII函数运用
- 【Linux】将Oracle安装目录从根目录下迁移到逻辑卷
- linux 增加用户 useradd 用法小结及配置文件说明
- 使用ODP.NET一次执行多句SQL语句
- 软工实践个人练习-使用github进行代码管理
- [读书笔记]算法(Sedgewick著)·第一章(1)
- 读书笔记 effective c++ Item 27 尽量少使用转型（casting）
- Go语言备忘录：基本数据结构
- 使用paramiko远程执行
- vue 如何点击按钮返回上一页
- sourceTree如何不用注册就使用
- si_da
- Python 第三方库 cp27、cp35 等文件名的含义(转)
- Northwind学习笔记
- Pytorch 各种奇葩古怪的使用方法
- vc6中向vs2010迁移的几个问题（2）
- Jackson 处理复杂类型(List,map)两种方法
- Hadoop提交作业流程
- ruby中的预定义变量(Predifined Variables)
- Java 的Integer、int与new Integer到底怎么回事？