有这样一个需求：
要求将文字与icon作为一个盒子，盒子内文字与icon水平垂直居中，且盒子可以放在屏幕的任意位置：比如左侧或者右侧或者居中，且具有响应式的特点。
思路如下：
首先，用一个div包裹两个子div文字和icon。父盒子宽高已经指定，子盒子内其余属性设置好。
<div class="w-20 h-10 bg-blue-300 flex"><div class="text-base text-white">联系我们</div><img src="./img/Lime250.png" alt="" class="w-4 h-4"></div>
使用flex的justify-content: center 和 align-content: center属性来分别做水平和垂直定位。
<div class="w-40 h-10 bg-blue-300 flex justify-center items-center"><div class="text-base text-white">联系我们</div><img src="./img/Lime250.png" alt="" class="w-4 h-4"></div>
如果要使父盒子显示在页面左中右，可以使用一个div将父盒子包裹，再使用flex布局的justify-content属性。
<div class="flex justify-end"><div class="w-40 h-10 bg-blue-300 flex justify-center items-center"><div class="text-base text-white">联系我们</div><img src="./img/Lime250.png" alt="" class="w-4 h-4"></div></div>
