div内图片和文字水平垂直居中且在屏幕任意位置

Andrew_SJ

于 2021-08-03 15:50:04 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.youkuaiyun.com/Andrew_SJ/article/details/119351390

版权

本文介绍如何使用CSS实现一个包含图片和文字的盒子，使其内部元素水平垂直居中，并能在屏幕的左侧、右侧或中心位置灵活布局。通过设定父级div的宽高和使用flex布局的justify-content与align-content属性来达到目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有这样一个需求：
要求将文字与icon作为一个盒子，盒子内文字与icon水平垂直居中，且盒子可以放在屏幕的任意位置：比如左侧或者右侧或者居中，且具有响应式的特点。
在这里插入图片描述
思路如下：
首先，用一个div包裹两个子div文字和icon。父盒子宽高已经指定，子盒子内其余属性设置好。

<div class="w-20 h-10 bg-blue-300 flex">
    <div class="text-base text-white">联系我们</div>
    <img src