这篇文章给大家整理四种css实现垂直居中效果,思路明了非常不错,具有参考借鉴价值,需要的朋友参考下吧
行高line-height实现单行文本垂直居中
以前一直认为单行文本垂直居中要将高度和行高设置成相同的值,但高度其实没必要设置。实际上,文本本身就在一行中居中显示。在不设置高度的情况下,行高撑开高度。
测试文字

设置vertical-align:middle实现垂直居中
【1】设置父元素的display为table-cell
立即学习“前端免费学习笔记(深入)”;
通过为table-cell元素设置vertical-align:middle,可使其子元素均实现垂直居中。这和表格里单元格的垂直居中是类似的
[注意] 若要IE7-浏览器支持,则可以将其改为
表格结构[注意] 设置为table-cell的p不能使用浮动或绝对定位,因为浮动或绝对定位会使元素具有块级元素特性,从而丧失了table-cell元素具有的垂直对齐的功能。
若需要浮动或绝对定位处理,则需要外面再套一层p。
我是有点长的有点长的有点长的有点长的测试文字

【2】若子元素是图片,通过设置父元素的行高来代替高度,且设置父元素的font-size为0。
vertical-align:middle的解释是元素的中垂点与父元素的基线加1/2 父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的,且各个字体的字符X的高低位置不一致。
所以,当字体大小较大时,这种差异就更明显。当 font-size为0时,相当于把字符X的字体大小设置为0,于是可以实现完全的垂直居中。
@@##@@
![CSS四中方法实现垂直居中]()
【3】通过新增元素来实现垂直居中的效果
新增元素设置高度为父级高度,宽度为0,且同样设置垂直居中vertical- align:middle的inline-block元素。由于两个元素之间空白被解析,所以需要在父级设置font-size:0,在子级再将 font-size设置为所需值;若结构要求不严格,则可以将两个元素一行显示,则不需要设置font-size:0。
MATLAB与VB混合编程技术研究 WORD版
本文档主要讲述的是MATLAB与VB混合编程技术研究;着重探讨了在VB应用程序中集成MATLAB实现程序优化的四种方法,即利用Matrix VB、调用DLL动态链接库、应用Active自动化技术和动态数据交换技术,并分析了集成过程中的关键问题及其基本步骤。这种混合编程实现了VB的可视化界面与MATLAB强大的数值分析能力的结合。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看
下载
我是比较长的比较长的多行文字
思路三:通过绝对定位实现垂直居中
【1】若子元素不定高, 使用top50%配合translateY(-50%)可实现居中效果。
translate函数的百分比是相对于自身高度的,所以top:50%配合translateY(-50%)可实现居中效果。
[注意] IE9-浏览器不支持;
[注意]若子元素的高度已知,translate()函数也可替换为margin-top: 负的高度值。
测试文字
【2】若子元素定高,结合绝对定位的盒模型属性,实现居中效果
测试文字
在水平居中对齐中,元素外层套一层p并设置absolute,元素设置负margin-left或者relative的负left属性,可以实现水平居中的效果。但由于margin是相对于包含块宽度的,这样margin-top:-50%得到的是宽度而不是高度的-50%,所以不可行;对于relative的百分比取值而言,在包含块高度为auto的情况下,chrome、safari和IE8+浏览器都不支持设置元素的百分比top值,所以也不可行。
思路四:使用弹性盒模型flex实现垂直居中
[注意] IE9-浏览器不支持
【1】在伸缩容器上设置侧轴对齐方式align-items: center
测试文字
【2】在伸缩项目上设置margin: auto 0
测试文字