如何在菱形div中垂直水平居中文字？支持JavaScript方案

下面提供几种可行的方案，包括CSS优化方案和JavaScript方案：

方案一：CSS Flexbox + Shape-outside（保留文字换行） #

基于你提供的代码，通过添加Flex布局实现垂直水平居中，同时保留文字在菱形内的换行效果：

修改后的CSS代码 #

div.box {
  --s: 450px; 

  height: var(--s);
  width: var(--s); 
  clip-path: polygon(0 50%,50% 100%,100% 50%,50% 0);
  background: #333;
  color: #fff;
  margin: 30px auto 0;
  font-size: 20px;
  text-align: justify;
  /* 添加Flex布局实现垂直水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-container {
  width: 100%;
  position: relative;
}

.text-container::before,
.text-container i {
  content: '';
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  shape-outside: conic-gradient(from 45deg at 0 50%,transparent 90deg,#fff);
}

.text-container i {
  right: 0;
  shape-outside: conic-gradient(from 225deg at 100% 50%,transparent 90deg,#fff);
}

修改后的HTML代码 #

<div class="box">
  <div class="text-container">
    <i></i> 
    Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet
  </div>
</div>

原理说明：

• 外层.box使用display: flex配合align-items: center和justify-content: center，实现内部文本容器的垂直水平居中。
• 新增的.text-container作为文本的容器，内部通过绝对定位的伪元素和<i>标签保持shape-outside效果，让文字在菱形范围内自动换行。

方案二：CSS Grid + 文本容器（简化版，适合短文本） #

如果文本不需要复杂换行，可使用Grid布局快速实现居中：

div.box {
  --s: 450px; 

  height: var(--s);
  width: var(--s); 
  clip-path: polygon(0 50%,50% 100%,100% 50%,50% 0);
  background: #333;
  color: #fff;
  margin: 30px auto 0;
  font-size: 20px;
  /* Grid布局实现居中 */
  display: grid;
  place-items: center;
  text-align: center;
}

<div class="box">
  Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis.
</div>

方案三：JavaScript动态计算居中 #

通过JS计算文本容器的偏移量，实现动态居中：

CSS代码（基础样式） #

div.box {
  --s: 450px; 

  height: var(--s);
  width: var(--s); 
  clip-path: polygon(0 50%,50% 100%,100% 50%,50% 0);
  background: #333;
  color: #fff;
  margin: 30px auto 0;
  font-size: 20px;
  text-align: justify;
  position: relative;
  overflow: hidden;
}

.text-container {
  position: absolute;
  width: 100%;
}

.text-container::before,
.text-container i {
  content: '';
  float: left;
  height:100%;
  width: 50%;
  shape-outside: conic-gradient(from 45deg at 0 50%,transparent 90deg,#fff);
}

.text-container i {
  float: right;
  shape-outside: conic-gradient(from 225deg at 100% 50%,transparent 90deg,#fff);
}

HTML代码 #

<div class="box">
  <div class="text-container">
    <i></i> 
    Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet
  </div>
</div>

JavaScript代码 #

function centerText() {
  const box = document.querySelector('.box');
  const textContainer = document.querySelector('.text-container');
  
  const boxHeight = box.offsetHeight;
  const textHeight = textContainer.offsetHeight;
  
  // 计算垂直居中的偏移量
  const topOffset = (boxHeight - textHeight) / 2;
  textContainer.style.top = `${topOffset}px`;
}

// 页面加载时执行
window.addEventListener('load', centerText);
// 窗口大小变化时重新计算
window.addEventListener('resize', centerText);

原理说明：

• 通过JS获取盒子和文本容器的高度，计算出垂直居中所需的偏移量，动态设置文本容器的top值。
• 添加窗口 resize 监听，确保在窗口大小变化时仍保持居中效果。

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