CSS/SASS求助：实现卡片文本居中自适应，保持标题置顶

问题描述 #

• 文字较多时的当前卡片效果：
• 文字较少时的理想卡片效果（“关于我”保持在顶部）：

调试YouTube上找到的CSS卡片设计时遇到问题：文字较少时内容锚定在顶部，底部留大片空白。需要实现文本居中适配布局，同时“关于我”标题保持在顶部。

解决方案 #

通过调整Flexbox布局实现自适应内容分配，同时保证标题置顶、正文居中：

修改后的CSS代码

.container-profile-small {
  position: relative;
  width: 990px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 64px;
  margin: auto;
}

.price{
  padding-top: 90px;
}

.container-profile-small .card-profile-small {
  position: relative;
  width: 360px;
  height: 448px;
  background: #fff;
  margin: 0;
  border-radius: 5px;
  box-shadow: 0 15px 25px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.container-profile-small .card-profile-small .gradient-small {
  height: 200px;
  background-image: linear-gradient(180deg, rgb(244, 186, 112) 0%, rgb(231, 139, 0) 28%);
  clip-path: circle(200px at center 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  
  h1 {
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    font-family: helvetica;
    margin: 0;
  }
  
  h2 {
    color: #fff;
    font-size: 24px;
    margin: -8px 0 0 0;
    font-family: helvetica;
  }
}

.profile-img-small {
  width: 10em;
  height: 10em;
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background-image: linear-gradient(0deg, rgb(244, 186, 112) 0%, rgb(231, 139, 0) 28%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 15px 25px rgba(0,0,0,0.2);
  
  img {
    width: 90%;
    height: 90%;
    border-radius: inherit;
  }
}

.container-profile-small .card-profile-small .content-profile-small {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 60px 20px 20px;
  font-family: helvetica;
  
  h1 {
    margin: 0 0 16px 0;
    font-weight: bold;
  }
  
  p {
    color: #666;
    margin: auto 0;
    max-width: 100%;
  }
  
  h4, h5 {
    font-family: helvetica;
  }
  
  h4 {
    font-weight: bold;
  }
}

HTML代码（保持不变）

<div class="container-profile-small">
  <div class="card-profile-small">
    <div class="gradient-small">
        <h1>Lynwood</h1>
        <h2>Hungary</h2>
    </div>
    <div class="profile-img-small">
      <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cmFuZG9tJTIwcGVvcGxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="user">
    </div>
    <div class="content-profile-small">
      <h1>About Me:</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit</p>
    </div>
</div>
</div>

关键改动说明 #

1. 卡片容器改为Flex垂直布局：让内部元素自动分配垂直空间，避免固定margin导致的布局错位。
2. 固定渐变区域高度：替代原有的height:100%，确保卡片上部布局稳定。
3. 头像改用绝对定位：不占用Flex布局空间，避免挤压内容区域。
4. 内容区域自适应填充：flex-grow:1让内容区占据卡片剩余高度，内部Flex布局实现标题置顶、正文垂直居中。
5. 优化内边距：顶部padding避开头像区域，保证内容可见性。

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