【学习打卡】第2天 CSS垂直居中布局
2022/8/7 4:22:51
本文主要是介绍【学习打卡】第2天 CSS垂直居中布局,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、课程信息
课程名称:一课全面掌握主流CSS布局
课程章节:第3章 垂直居中布局
主讲老师:KingJ
二、课程内容
- 垂直居中布局的概念
- 垂直居中布局的两种方式及优缺点
三、课程收获
通过学习掌握了CSS垂直居中布局的两种方式,通过代码演示和对比两种方式的优缺点,更加深刻认识到了CSS垂直居中布局的使用情景。
1.什么是垂直居中布局
1-1概念
垂直居中布局就是指当前元素在父级元素容器中,垂直方向是居中显示的
1-2垂直居中布局实现方式
- table-cell + vertical-align属性配合使用
- absolute + transform属性配合使用
2.垂直居中布局的第一种解决方案
<!-- 定义父级元素 --> <div class="parent"> <!-- 定义子级元素 --> <div class="child"> 慕课网 </div> </div>
CSS代码实现垂直方向居中布局:
.parent{ width: 200px; height:600px; background: #ccc; /* display属性: * table: 设置当前元素为<table>元素 * table-cell: 设置当前元素为<td>元素(单元格) */ display: table-cell; /* vertical-align属性:为文本内容设置垂直方向对齐方式 * top: 顶部对齐 * middle: 居中对齐 * bottom: 底部对齐 */ vertical-align: middle; } .child{ width: 200px; height:200px; background: #c9394a; }
优点
浏览器兼容性比较好
缺点
vertical-align属性具有继承性,导致子级元素的文本也是居中显示的
3.垂直居中布局的第二种解决方案
<!-- 定义父级元素 --> <div class="parent"> <!-- 定义子级元素 --> <div class="child"> 慕课网 </div> </div>
CSS代码实现垂直方向居中布局:
.parent{ width: 200px; height: 600px; background: #ccc; /* 开启定位 */ position: relative; } .child{ width: 200px; height:200px; background: #c9394a; /** 当把当前元素设置为绝对定位后: * 如果父级元素没有开启定位,当前元素相对页面定位 * 如果父级元素开启定位,当前元素相对父级元素定位 */ position: absolute; top: 50%; transform: translateY(-50%); }
优点
父级元素是否脱离文档流,不影响子级元素垂直居中效果
缺点
transform属性是CSS3中新增属性,浏览器支持情况不好
四、学习截图
这篇关于【学习打卡】第2天 CSS垂直居中布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14CSS-Module学习:轻松入门指南
- 2024-11-12CSS9资料入门指南
- 2024-11-12CSS浮动资料详解:初学者指南
- 2024-11-12CSS选择器资料详解与实战教程
- 2024-11-12CSS样式资料:初学者必备指南
- 2024-11-11CSS项目实战:从入门到上手
- 2024-11-11CSS定位项目实战:新手指南
- 2024-11-11CSS浮动项目实战:初学者指南
- 2024-11-11CSS选择器项目实战:从入门到上手
- 2024-11-11CSS样式项目实战:新手入门指南