给大家整理四种css实现垂直居中效果，思路明了非常不错，具有参考借鉴价值，需要的朋友参考下吧

行高line-height实现单行文本垂直居中 以前一直认为单行文本垂直居中要将高度和行高设置成相同的值，但高度其实没必要设置。实际上，文本本身就在一行中居中显示。在不设置高度的情况下，行高撑开高度。 .test{ line-height: 50px; background-color: lightblue; } 测试文字 设置vertical-align:middle实现垂直居中 【1】设置父元素的display为table-cell 通过为table-cell元素设置