关于html元素垂直居中的总结

html元素垂直居中的几种方式：文本居中可以用line-height、vertical-align:middle、自己用margin值计算、用flex完成垂直居中、用display：table完成垂直居中、用top：50%；margin-top：-50%元素高度、或top：50%；transform:translate(-50%,-50%); 再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了。

关于line-height:

line-height是行高的意思，就是一行的行高，一般如果我们想让一行文字居中的时候，用line-height，line-height的值和父盒子高度一致即可。

关于行高的定义：两行文字基线之间的距离。

那么什么是基线？

基线是在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线。在 CSS 中，每一行文字也可以看成一个“行盒子”，而每一个行盒子都有4 条线：顶线、 中线、基线和底线。关于行盒子的具体内容，看下图：

如图，每一行文字，可看成由上间距、文本内容、下间距构成，根据行高的标准定义，行高等于两条基线之间的距离，即第一行的3-4+上下间距+第二行的1-2+2-3，因为css中每一行的上间距和下间距肯定是相等的，所以代换一下，行高就等于它本身的上间距+下间距+文本高度。因此，我们也可以把行高记为，行高就是一行的高度，这一行的高度中包含了上下两个间距和文本内容本身。{此段文字为CSDN博主「yangyuqingabc」的原创文章，原文链接：https://blog.csdn.net/yangyuqingabc/article/details/84178815}

像vertical-align：middle是针对行内元素的一种居中方式，一般我们一个元素在一行里表面是居中了，实际上可能是在中下位置上，vertical-align：middle就是让他在一行中居中。

下面看一下具体line-height的应用：

box盒子高度是100px；盒子里p元素文字要居中，直接用line-height：100px即可。

如果p元素内容太长，一行放不下的话，因为有了line-height：100px这个值，因此，换行的时候，下一行的内容就在另一个高度100px的盒子中间垂直居中了。如果有另一个p元素的话，另一个p元素另起一行，也是文字在另一个高度100px的盒子里居中，其实换行和另一个p元素都只是占了一行高度，不过因为我们设置了line-height值为100px，因此出现了这样的状况。

如果只给第一个p元素行高，不给第二个p元素行高，则正常显示了。

另外设置行高还可以用em、百分比进行设置，百分比和em是相对父元素的font-size大小来计算行高的，如果父元素默认是20px大小，那1.5em就是30px的行高，200%就是40px的行高。

多行文字居中问题：

方法一：用line-height和vertical-align让多行文字居中。

方法二：给父元素display：table，给子元素display：table-cell；vertical-align：middle即可。如果说文字出现不换行情况，可以用word-break：break-all；word-wrap：break-word；来解决。

方法三：脱离文档流的垂直居中方式，用top：50%，然后让元素高度向上偏移元素高度一半的值。

方法四：用flex布局让元素居中，想让p元素中内容居中，就给p元素的父元素一个display:flex;align-items:center

方法五：当然如果都是固定盒子有着固定的宽高，也可以直接用margin-top值来给盒子进行居中。

在元素宽高不明的情况下，如何让元素垂直、水平居中：

可以用left：50%，top：50%，然后用transform：translate（-50%，-50%）来让元素居中。