Tailwind CSS Flex布局中右侧半区图片居中定位问题求助

太懂这种明明需求简单却卡壳的憋屈感了！别慌，咱们分分钟搞定这个图片居中的问题——保证完全不碰左边的文本区域，也不会打乱页面其他结构~

先拆解你的核心需求：让右侧w-1/2的区块里的图片，移动到这个右半区的中心位置。问题出在你右侧容器的对齐方式上，咱们只需要调整几类名就行：

解决方案1：图片在右半区完全居中（水平+垂直） #

把右侧包裹图片的容器的类从 flex flex-col justify-start items-end 改成 flex flex-col justify-center items-center：

• justify-center 让内容在垂直方向上居中
• items-center 让内容在水平方向上居中

如果不想图片占满整个右半区（占满的话居中效果不明显），可以把图片的 w-full 改成 w-3/4 或者你想要的固定尺寸（比如 max-w-md），这样就能明显看到图片在右半区居中的效果了。

解决方案2：图片水平居中，垂直和左侧文本顶部对齐 #

如果你希望图片和左侧文本的垂直位置保持一致（都靠上），只需要改 items-end 为 items-center，保留 justify-start 就行，也就是右侧容器类改成 flex flex-col justify-start items-center。

修改后的完整代码 #

<script>
import Navbar from './components/Navbar.vue';
</script>

<template>
  <div class="flex flex-col h-screen">
    <Navbar/>
    <section class="flex-1 flex items-center justify-center px-10 relative max-w-4xl mx-auto w-full">
      <div class="flex">
        <!-- 左侧文本区：完全没动任何代码 -->
        <div class="w-1/2 flex flex-col justify-start items-center">
          <div class="mt-1">
            <h1 class="text-5xl font-bold">Name</h1>
            <div class="my-6 w-1/4 h-2 bg-purple-500"></div>
            <p class="text-lg text-gray-700">
              hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
            </p>
          </div>
        </div>
        <!-- 右侧图片区：只改了这里的对齐类 -->
        <div class="w-1/2 flex flex-col justify-center items-center">
          <!-- 可选：把w-full改成w-3/4来看到更明显的居中效果 -->
          <img src="../src/assets/9293987.jpg" alt="Profile" class="w-full object-cover rounded-xl border-2 border-gray-700"/>
        </div>
      </div>
      <!-- 底部按钮：完全保留原样 -->
      <button class="absolute bottom-6 left-1/2 -translate-x-1/2 px-6 py-2 border border-gray-600 rounded-full text-sm text-gray-800 hover:bg-gray-100 transition">
        progress...
      </button>
    </section>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

试试上面的修改，绝对符合你的要求——左边文本区纹丝不动，页面其他结构也完全不受影响，图片乖乖待在右半区的中心~

内容来源于stack exchange