「这是我参与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,使用绝对定位实现
原理
与绝对定位实现水平居中效果的思路完全一致
- 使用绝对定位:父元素设置相对定位,子元素设置绝对定位;
- 设置子元素相对父元素尺寸的
top
、right
、bottom
、left
值; - 再设置相对子元素自身尺寸的
margin
或transform
,进行反向移动,完成水平居中效果;
示例
<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 布局-居中布局-垂直居中布局;