【CSS 学习总结】第八篇 - CSS 布局 - 居中布局 - 垂直居中布局
一，前言
上一篇，主要介绍了 5 种水平居中效果的实现方案、原理及优缺点，主要涉及以下几个点：
文本、行内元素、行内块级元素的水平居中；
单个块级元素的水平居中；
多个块级元素的水平居中；
任意数量元素的水平居中；
绝对定位+反向移动，实现水平居中效果；
本篇，开始介绍 CSS 布局-居中布局-垂直居中布局；
二，垂直居中布局简介
垂直居中布局：指当前元素在父级元素的容器中，垂直方向是居中显示的；
垂直居中效果的 3 种情况：
单行文本、行内元素、行内块元素的垂直居中；
图片的垂直居中；
单个块级元素的垂直居中；
三，单行文本、行内元素、行内块元素
利用
line-height行高属性通过为父元素设置相同的高度和行高，实现单行文本、行内元素、行内块元素的垂直居中的效果；
示例
通过设置父元素的高度与行高相等，实现文字在容器内的垂直居中效果；
优点
实现简单、兼容性好；
缺点
需要知道父元素的高度；
只能控制单行文本；
四，图片的垂直居中
利用了vertical-align垂直对齐和line-height行高，实现垂直居中的效果；
示例
实现图片在父容器中的垂直居中效果：
为图片的父元素设置高度和行高，将图片控制在父容器的中间区域；
再通过
vertical-align: middle;设置图片在垂直方向上居中对齐，实现图片在容器内的垂直居中效果；
优点
实现简单、兼容性好；
缺点
需要设置
font-size: 0;;
五，单个块级元素
实现一个块级元素（子容器）在父用器中的垂直居中效果：
使用 table-cell 实现；
使用绝对定位实现；
使用 flex 实现；
5.1，使用 table-cell 实现
原理
利用 Table 布局，设置表格内容为居中对齐，实现垂直居中效果；
示例
将父元素转化为
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，进行反向移动，完成水平居中效果;
示例
为父元素设置相对参照物，为子元素设置绝对定位；
设置 top 方位 50%（此时并非正中间），再进行反向移动，使其正好处于正中间位置，实现垂直居中的效果；
反向移动的两种方法：
1，设置
margin负值实现反向移动；2，使用 CSS3 变换属性
transform进行垂直位移，移动距离为高度的一半；
优点
实现简单，兼容性好；
块级、行内元素都可以实现；
缺点
由于使用了绝对定位，会导致脱离文档流；
使用
margin-top负值实现反向移动时，需要知道高度值；使用 CSS3 变换属性
transform实现反向移动，存在兼容性要求（IE 9+）；
5.3，使用 flex 实现
原理
使用 flex 设置align-item元素对齐方式，实现垂直居中效果；
示例
使用 flex 布局，并设置align-items:center;实现垂直居中效果；
优点
实现快捷、简单；
功能强大，可以控制容器内多个子元素对齐；
缺点
flex 布局在 PC 端存在兼容性问题；
对移动端友好，要求 android 4.0+；
六，结尾
本篇，主要介绍了 5 种垂直居中效果的实现方案、原理及优缺点，主要涉及以下几个点：
文本、行内元素、行内块级元素的垂直居中；
图片的垂直居中；
利用
table-cell，实现单个块级元素的垂直居中；使用绝对定位+反向移动，实现单个块级元素的垂直居中；
使用
flex布局，实现单个块级元素的垂直居中；
下一篇，介绍 CSS 布局-居中布局-垂直居中布局；
还未添加个人签名 2018.12.13 加入
还未添加个人简介
评论