面试中常问的几个水平、垂直居中的方法

1. 对齐相关的几个CSS属性

三个属性：text-align、vertical-align、line-height

参考链接：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align

https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height（英文版完整）

行内布局的相关内容：待整理，几个名词：

1. 基线（baseline）、顶线（top）、底线（bottom）、中线（middle）、x-height
2. 字符框、em框
3. 内容区（content area）
4. 行间距、半行间距
5. 行内框盒子、内联盒子（inline box）
6. 行框盒子（line box）
7. 包含盒子（containing box）：包含块，出现在MDN的各种属性中，很重要，待整理

1.1 text-align

  适用block元素

1.2 vertical-align

适用inline、inline-block、table-cell元素，以及::first-letter和::first-line

1.3 line-height

适用所有元素，以及::first-letter和::first-line

翻译如下

（1）对于块级元素，line-height指定了元素内部line-boxes的最小高度 。（不是很理解？）

（2）对于非替代行内元素，line-height用于计算line-box的高度。

（3）对于替代行内元素，例如input、button，line-height没有影响，因此行间距对于替换行内元素也不起作用。

强调：对于替换行内元素来说，如果设置line-height，则没有影响；引申来说，如果对一个包含了替换元素的父元素来说，如果对其设置行高，也不会影响其中的替换行内元素，只会影响其中的非替换行内元素。（div中有img和span，div设置的line-height只会影响span，且在span没有设置自己的line-height的前提下。）

2.单行文本垂直居中

问题描述：单行文本垂直居中，一般指的是一个block元素中有一段单行文字<