如何在Tailwind卡片中实现SVG图标在可用空间内双轴居中？

直接用Tailwind的flex布局类就能搞定，不用靠padding瞎调，步骤如下：

1. 给图标所在的外层容器（md:flex-shrink-0对应的div）添加flex items-center justify-center，这个组合能让容器内的元素自动实现水平+垂直居中，且不会额外增加图标和下方文本的间距。
2. 清理图标span上多余的布局类：去掉h-48、inline-block、w-full、object-cover、md:h-full这些干扰布局的类，保留样式类的同时，把图标尺寸调整为w-24 md:w-48，适配不同屏幕大小。

修改后的完整代码：

<link href="https://www.windesheim.nl/assets/css/main.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css" rel="stylesheet"/>

<!--start card image-->
<div class="max-w-md mx-auto bg-white shadow-md overflow-hidden md:max-w-2xl mt-6 mb-6">
    <div class="md:flex">
        <div class="md:flex-shrink-0 flex items-center justify-center">
            <span class="icon fill-current text-brand-1-darker icon--lightbulb drop-shadow3 w-24 md:w-48">
                <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" aria-hidden="true" focusable="false">
                    <path d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0026.64 14.28h61.71a31.99 31.99 0 0026.64-14.28l17.09-25.69a31.989 31.989 0 005.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path>
                </svg>
            </span>
        </div>
        <div class="p-8">
            <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Title</div>
            <p class="block mt-1 text-lg leading-tight font-medium text-black">Lead</p>
            <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>
<!--end card image-->

原理说明 #

• flex items-center：让容器内元素在垂直方向上居中对齐
• justify-center：让容器内元素在水平方向上居中对齐
• w-24 md:w-48：确保小屏幕图标尺寸适中，大屏幕保持合适宽度
• svg宽高设为100%：让svg自动填满父容器，保证缩放比例正常

内容的提问来源于stack exchange，提问作者Hagelslag