前端 | 关于盒子模型的知识点（文本居中与外边距合并）

今天要记录的有两点：

• 盒子模型文本元素在盒子中的居中问题
• 外边距合并（隐藏知识点）

在做盒子模型的实验中，发现使用text-align将元素文本在水平方向上居中外，还忽略了一点，在垂直方向上居中，达到我们想要的效果，整理了一番后发现有两种方式：

1、使用line-height 属性手动调节

   （将元素的line-height设置与height相同的高度，

      适用于只占一行的文本，若是多行字符只显示一行）

2、使用vertical-align 属性设值为 middle

过程中也发现，在使用第2种方式的vertical-align 时要注意的一点是：

此属性必须使用在table-cell & inline 的元素中（不可使用在块状元素上）所以在面对块状元素是需要有一个diaplay来转换。

【番外：vertical-align 的其他用法】