首页手记【学习打卡】第3天 CSS居中布局(水平+垂直)

【学习打卡】第3天 CSS居中布局(水平+垂直)

标签：

Html/CSS

一、课程信息

课程名称：一课全面掌握主流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%);
}