网页中如何将文字和图片垂直居中

如果在进行网页编写的过程中，发现无论如何调整文字的CSS代码都无法将其垂直居中，这时我们就需要考虑是不是其他元素没有居中导致的视觉误差，这里记录一次由于图片没有垂直居中导致的问题。下面分享一位大佬的总结，关于文字和图片垂直居中的经验。

div相对于页面水平居中显示：

核心代码：margin：0 auto；
/意思为:div的外边距上下为0px,左右居中显示;/
/前提是position为相对定位;不能为absolute绝对定位/
**绝对定位：**是脱离文档流，所以margin无效；它是一个虚体；任何元素都可以穿过它
**相对定位：**是偏移某个距离，且保持未定位签的形状，它原本所占的空间仍保留。margin有效；它是一个实体；

文字水平居中显示(相对于简单文本居中)：

核心代码：text-align: center;
用法：
1、div中直接写css代码：text-align: center;
2、在div子级文本标签中写：text-align: center;
解释：
/意思为:文本对齐方式为:中心;
前提是一个div包着,参照物为div/

文字垂直居中显示：

核心代码：line-height:30px;
用法：
div：height:30px;
div中的文字：line-height: 30px;
解释：
/意思为:离线高度为30px;/
/前提有两个:
1 页面本身有margin(外边距)和padding(内边距):所以,都要设置为0px;
2 与自己的父级(或div)高度要设置一致;/

文字水平居中显示(相对于导航栏浮动的多个文本居中)：

适用：导航栏中浮动后文本为多个而且之间都有间距的方法；
用法：
div：width: 150px;
div 中的文字：
padding-left:22.5px;
margin-left: 22.5px;
font-size: 30px;
解释：
div父级设置宽度；
div中的子级设置它的内边距和外边距为父级宽度的四分之一；
前提字体设置宽度，父级宽度减去每个字体大小，再除以四分之一

图片和文本垂直居中

设置css使文字和图片同排同行时候上下垂直居中
img{ vertical-align:middle;}

附上大佬的链接：

https://blog.csdn.net/weixin_45673401/article/details/104073629