前端学习记录day4 CSS垂直居中效果的实现详细理解 2021/09/24

 今天我们对前一天（day2）的图片中的，垂直居中效果做一个详细的解释，而且是方便初学者的理解。

我当时学这里的时侯并不清晰（上课老师就说这么实现，也没说具体怎么实现），有自己摸索了一番，总结出了一个比较通俗易懂的解释。

首先明确，这里面其实是有这样3部分：①最外面的p9②文本整体line③文本里面的文字。

然后我们在脑子里要有这样几个认知：

1、文本这个整体（也就是②）默认是靠上对齐的（在这即顶着p9的上沿）

2、文本里面的文字，在文本这个整体中居中显示

首先我们将p9段落的高度设置100px，背景颜色设置为灰色（帮助我们理解，将这100px的高度展示出来）

 .p9 { height: 100px; background-color: gray;}

当p9中有文字的时侯，因为之前提到的认知1，文字会实现如下效果。（height是指元素的高度，这里我们就是将p9这个段落的高度设置为了100px，而，文本整体的高默认是21px左右。文本这个整体的大小，小于p9的高度，且文本中文字的大小默认与文本整体大小相近，就会实现下面的效果，这不难想象。）

 而如果，我们将文本这个整体的高度变高，按照这个理解，因为文字在文本整体中居中，不改变文字本身大小，文本整体变高，那么文字在会就相对于p9的上沿下移，下面我们试着将文本的整体高度变为60px来试试。

.p9 { height: 100px; background-color: gray;line-height: 60px;} 

很明显，文字实现了下移，根据这个原理，如果我们将文本整体的高度变为和p9高度相同，那么我们就可以实现垂直居中效果。 （如下图）

.p9 { height: 100px; background-color: gray;line-height: 100px;}  /* 垂直居中 */