css3实现水平垂直居中------(特别注意，里边的固定还是不固定)
2024-10-20 06:29:37
a,----定位方式（父元素宽高固定，子元素宽高固定）
<div class="Father">
<div class="children"></div>
</div>
<style lang="scss" scoped>
.Father{
position: relative;
}
.children{
width: 50px;
height: 50px;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
}
</style>
b, ----flex布局方式（父元素宽高不固定，子元素宽高不固定）
<div class="Father">
<div class="children"></div>
</div>
<style lang="scss" scoped>
.Father {
border: 1px solid red;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.children {
width: 50px;
height: 50px;
border: 1px solid blue;
}
</style>
c, ----transform方式（父元素宽高不固定，子元素宽高不固定）
<div class="Father">
<div class="children"></div>
</div>
<style lang="scss" scoped>
.Father {
border: 1px solid red;
height: 100px;
position: relative;
}
.children {
width: 50px;
height: 50px;
border: 1px solid blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
}
</style>
.
最新文章
- Javascript一些实用技巧
- Oracle数据块损坏篇之10231内部事件
- python3 文件增删查
- mysql 的max_connections和max_user_connections 的区别
- scala操作符&运行
- JAVA RMI例子
- storm安装笔记以及提交拓扑任务
- 超简单的处理JSON格式和JSON数组格式的String
- iscsi 操作备忘
- java实现多继承
- Swift--控制流与oc不同的地方
- C# ftp 图片上传多快好省
- 戴建钊 201521123023《Java程序设计》第1周学习总结
- 简单的cookie读写封装
- 44.1khz 16位比特双声道一分钟的音乐文件占多少硬盘空间？
- unity fbx 导出动画
- (一):C++分布式实时应用框架----整体介绍
- conda 安装多个版本的python
- python网络图片爬取存储全代码
- ubuntu下hadoop,spark配置