一、课程信息
课程名称:一课全面掌握主流CSS布局
课程章节:第4章 居中布局
主讲老师:KingJ
二、课程内容
- 居中布局(水平+垂直)的概念
- 居中布局的两种方式及优缺点
三、课程收获
通过学习掌握了CSS水平垂直居中布局的两种方式,通过代码演示和对比两种方式的优缺点,更加深刻认识到了CSS水平垂直居中布局的使用情景。
1 什么是居中布局(水平+居中)
概念
居中布局实际上就是既要水平方向居中,也要垂直方向居中
实现方式
- table + margin实现水平方向居中, table-cell + vertical-align实现垂直方向居中
- absolute + transform实现水平方向和垂直方向居中
2 水平垂直居中布局之方案一
示例
<!-- 定义父级元素 -->
<div class="parent">
<!-- 定义子级元素 -->
<div class="child">
慕课网
</div>
</div>
CSS代码实现垂直方向居中布局:
.parent{
width: 1000px;
height: 600px;
background: #ccc;
display: table-cell;
vertical-align: middle;
}
.child{
width: 200px;
height: 200px;
background: #c9394a;
/* table 或 block */
display: table;
margin: 0 auto;
}
优点
浏览器兼容性比较好
缺点
如果子级元素脱离文档流,导致margin属性的值无效
3 水平垂直居中布局之方案二
示例
<!-- 定义父级元素 -->
<div class="parent">
<!-- 定义子级元素 -->
<div class="child">
慕课网
</div>
</div>
CSS代码实现垂直方向居中布局:
.parent{
width: 1000px;
height: 600px;
background: #ccc;
/* 开启定位 */
position: relative;
}
.child{
width: 200px;
height:200px;
background: #c9394a;
/**
当把当前元素设置为绝对定位后:
* 如果父级元素没有开启定位,当前元素相对页面定位
* 如果父级元素开启定位,当前元素相对父级元素定位
*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
优点
父级元素是否脱离文档流,不影响子级元素垂直居中效果
缺点
transform属性是CSS3中新增属性,浏览器支持情况不好
四、学习截图
点击查看更多内容
1人点赞
0 评论
共同学习,写下你的评论
暂无评论
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦