一、课程信息
课程名称：一课全面掌握主流CSS布局
课程章节：
- 第1章 从概念讲起
- 第2章 水平居中布局
主讲老师：KingJ
二、课程内容
- 布局的概念
- 居中布局的分类
- 水平居中布局的三种方式及优缺点
三、课程收获
通过学习掌握了CSS水平居中布局的三种方式，通过代码演示和对比三种方式的优缺点，更加深刻认识到了CSS水平居中布局的使用情景。
1.什么是布局
- HTML页面的整体结构或骨架，类似传统报纸或杂志中的排版
- 布局不是某个技术内容，而是一种设计思想
2.居中布局的分类
-
水平居中布局
-
垂直居中布局
-
居中布局（水平+垂直）
3.水平居中布局
- 水平居中布局就是指当前元素在父级元素容器中，水平方向是居中显示的
水平居中布局实现方式
- inline-bllock + text-align属性配合使用
- table + margin属性配合使用
- absolute + transform属性配合使用
- 其他方式（自己探索）
4.水平居中布局的第一种解决方案
<!-- 定义父级元素 -->
<div class="parent">
<!-- 定义子级元素 -->
<div class="child">
慕课网
</div>
</div>
CSS代码实现水平方向居中布局：
.parent{
width: 100%;
height:200px;
background: #ccc;
/*
text-align属性：为文本内容设置对齐方式
* left: 左对齐
* center: 居中对齐
* right: 右对齐
*/
text-align: center;
}
.child{
width: 200px;
height:200px;
background: #c9394a;
/**
display属性：
* block:块级元素
* inline: 内联元素
* inline-block: 行内块级元素(块级+内联)
*/
display: inline-block;
}
优点
浏览器兼容性比较好
缺点
text-align属性具有继承性，导致子级元素的文本也是居中显示的
5.水平居中布局的第二种解决方案
<!-- 定义父级元素 -->
<div class="parent">
<!-- 定义子级元素 -->
<div class="child">
慕课网
</div>
</div>
CSS代码实现水平方向居中布局：
.parent{
width: 100%;
height:200px;
background: #ccc;
}
.child{
width: 200px;
height:200px;
background: #c9394a;
/* display值为table，block都可以，div元素默认为block */
display: table;
/**
margin属性：
* 一个值:上右下左
* 两个值：第一个表示上下，第二个表示左右
* auto： 根据浏览器自动分配
* 三个值: 第一个表示上，第二个表示左右，第三个表示下
* 四个值：上右下左
*/
margin：0 auto;
}
优点
只需要对子级元素进行设置就可以实现水平方向居中
缺点
如果子级元素脱离文档流，导致margin属性的值无效
注意：如何脱离文档流（3个）:
- 元素设置为浮动，float 左浮动或右浮动
- 元素设置为绝对定位，absolute
- 元素设置为固定定位
6.水平居中布局的第三种解决方案
<!-- 定义父级元素 -->
<div class="parent">
<!-- 定义子级元素 -->
<div class="child">
慕课网
</div>
</div>
CSS代码实现水平方向居中布局：
.parent{
width: 100%;
height:200px;
background: #ccc;
/* 开启定位 */
position: relative;
}
.child{
width: 200px;
height:200px;
background: #c9394a;
/**
当把当前元素设置为绝对定位后：
* 如果父级元素没有开启定位，当前元素相对页面定位
* 如果父级元素开启定位，当前元素相对父级元素定位
*/
position: absolute;
left: 50%;
transform: translateX(-50%);
}
优点
父级元素是否脱离文档流，不影响子级元素水平居中效果
缺点
transform属性是CSS3中新增属性，浏览器支持情况不好