【CSS 学习总结】第八篇 - CSS 布局-居中布局-垂直居中布局

243 阅读5分钟

「这是我参与11月更文挑战的第27天,活动详情查看:2021最后一次更文挑战」。


一,前言

上一篇,主要介绍了 5 种水平居中效果的实现方案、原理及优缺点,主要涉及以下几个点:

  • 文本、行内元素、行内块级元素的水平居中;
  • 单个块级元素的水平居中;
  • 多个块级元素的水平居中;
  • 任意数量元素的水平居中;
  • 绝对定位+反向移动,实现水平居中效果;

本篇,开始介绍 CSS 布局-居中布局-垂直居中布局;


二,垂直居中布局简介

垂直居中布局:指当前元素在父级元素的容器中,垂直方向是居中显示的;

垂直居中效果的 3 种情况:

  • 单行文本、行内元素、行内块元素的垂直居中;
  • 图片的垂直居中;
  • 单个块级元素的垂直居中;

三,单行文本、行内元素、行内块元素

原理

  • 利用line-height行高属性 通过为父元素设置相同的高度和行高,实现单行文本、行内元素、行内块元素的垂直居中的效果;

示例

<style>
.parent{
  height:100px;
  line-height:100px; /* 行高与元素度相等*/
}
</style>

<div class="parent">
  <div class="child">垂直居中</div>
</div>

通过设置父元素的高度与行高相等,实现文字在容器内的垂直居中效果;

优点

  • 实现简单、兼容性好;

缺点

  • 需要知道父元素的高度;
  • 只能控制单行文本;

四,图片的垂直居中

原理

利用了vertical-align垂直对齐和line-height行高,实现垂直居中的效果;

示例

<style>
.parent{
  height: 100px;
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}
</style>

<div class="parent">
  <div class="child">垂直居中</div>
</div>

实现图片在父容器中的垂直居中效果:

  • 为图片的父元素设置高度和行高,将图片控制在父容器的中间区域;
  • 再通过vertical-align: middle;设置图片在垂直方向上居中对齐,实现图片在容器内的垂直居中效果;

优点

  • 实现简单、兼容性好;

缺点

  • 需要设置font-size: 0;;

五,单个块级元素

如何实现一个块级元素(子容器)在父用器中的垂直居中效果:

  • 使用 table-cell 实现;
  • 使用绝对定位实现;
  • 使用 flex 实现;

5.1,使用 table-cell 实现

原理

利用 Table 布局,设置表格内容为居中对齐,实现垂直居中效果;

示例

<style>
.parent{
  display: table-cell;
  vertical-align: middle;
}
</style>

<div class="parent">
  <div class="child">垂直居中</div>
</div>
  • 将父元素转化为table-cell(相当与 table 中的 td);
  • 通过设置vertical-align: middle;垂直方向居中,使 td 中的内容实现垂直居中效果;

优点

  • 实现简单;无需设定宽高;
  • 兼容性相对较好(需要IE 8+);

缺点

父元素被转化为table-cell引发的问题:

  • 被设置为table-cell的元素,其高度、宽度的值对百分比将失效; 解决方法:需要为父元素设置display:table才能够使%生效;
  • 被设置为table-cell的元素,将不能够感知 margin;
  • 在父元素上设置table-row等属性,也会使其不感知 height;
  • 再设置float浮动和position定位时,会对默认布局造成破坏; 解决方法:可以考虑为其增加一个父div定义float等属性;
  • 当内容溢出时,还会自动撑开父元素;

5.2,使用绝对定位实现

原理

与绝对定位实现水平居中效果的思路完全一致

  • 使用绝对定位:父元素设置相对定位,子元素设置绝对定位;
  • 设置子元素相对父元素尺寸的toprightbottomleft值;
  • 再设置相对子元素自身尺寸的margintransform,进行反向移动,完成水平居中效果;

示例

<style>
.parent{
  position:relative;/* 相对定位 */
}
.child{
  height:50px
  position:absolute;/* 绝对定位 */
  top:50%;
  transform:translateY(-50%);
  /* margin-top:-25px;  */
}
</style>

<div class="parent">
  <div class="child">垂直居中</div>
</div>
  • 为父元素设置相对参照物,为子元素设置绝对定位;
  • 设置 top 方位 50%(此时并非正中间),再进行反向移动,使其正好处于正中间位置,实现垂直居中的效果;

反向移动的两种方法:

  • 1,设置margin负值实现反向移动;
  • 2,使用CSS3变换属性transform进行垂直位移,移动距离为高度的一半;

优点

  • 实现简单,兼容性好;
  • 块级、行内元素都可以实现;

缺点

  • 由于使用了绝对定位,会导致脱离文档流;
  • 使用margin-top负值实现反向移动时,需要知道高度值;
  • 使用CSS3变换属性transform实现反向移动,存在兼容性要求(IE 9+);

5.3,使用 flex 实现

原理

使用 flex 设置align-item元素对齐方式,实现垂直居中效果;

示例

<style>
.parent{
  display:flex;
  align-items:center;
}
</style>

<div class="parent">
  <div class="child">垂直居中</div>
</div>

使用 flex 布局,并设置align-items:center;实现垂直居中效果;

优点

  • 实现快捷、简单;
  • 功能强大,可以控制容器内多个子元素对齐;

缺点

  • flex 布局在 PC 端存在兼容性问题;
  • 对移动端友好,要求 android 4.0+;

六,结尾

本篇,主要介绍了 5 种垂直居中效果的实现方案、原理及优缺点,主要涉及以下几个点:

  • 文本、行内元素、行内块级元素的垂直居中;
  • 图片的垂直居中;
  • 利用table-cell,实现单个块级元素的垂直居中;
  • 使用绝对定位+反向移动,实现单个块级元素的垂直居中;
  • 使用flex布局,实现单个块级元素的垂直居中;

下一篇,介绍 CSS 布局-居中布局-垂直居中布局;