详解CSS实现水平垂直同时居中的5种思路介绍

下面小编就为大家带来一篇浅析CSS实现水平垂直同时居中的5种思路。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧

水平居中和垂直居中已经单独介绍过，本文将介绍水平垂直同时居中的5种思路

思路一： text-align + line-height实现单行文本水平垂直居中

<style>   
.test{   
    text-align: center;   
    line-height: 100px;   
}   
</style>

XML/HTML Code复制内容到剪贴板

1. <p class=“test” style=“background-color: lightblue;width: 200px;”>测试文字</p>

思路二： text-align + vertical-align