CSS教程

【学习打卡】第2天 CSS垂直居中布局

本文主要是介绍【学习打卡】第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垂直居中布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!