浅析CSS实现水平垂直同时居中的5种思路

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

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

CSS Code
复制内容到剪贴板

1. <style>   
2. .test{   
3.     text-align: center;   
4.     line-height: 100px;   
5. }   
6. </style>  

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

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

思路二： text-align + vertical-align