如何使用ConstraintLayout让文本屏幕居中且不与侧边可显隐按钮重叠

核心思路 #

让文本的可用区域自动避开按钮位置，不管按钮显示还是隐藏，都能保持文本居中，同时长文本自动换行不重叠。

方案一：Flexbox + 动态内边距（兼容性好） #

页面结构 #

<div class="page-container">
  <button class="side-btn left">左按钮</button>
  <div class="center-text">这里是要居中的文本，哪怕内容很长很长很长很长很长很长很长很长很长很长，也不会跟侧边按钮重叠</div>
  <button class="side-btn right">右按钮</button>
</div>

样式代码 #

.page-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* 让内容垂直居中 */
  /* 预留给左右按钮的空间，数值比按钮宽+边距大即可 */
  padding: 0 90px;
}

.side-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 45px;
}

.left {
  left: 15px;
}

.right {
  right: 15px;
}

.center-text {
  text-align: center;
  max-width: 100%;
  word-wrap: break-word; /* 长文本自动换行 */
}

/* 按钮隐藏时，把对应方向的内边距改小，充分利用空间 */
.page-container.hide-left {
  padding-left: 15px;
}

.page-container.hide-right {
  padding-right: 15px;
}

按钮显隐的JS控制 #

// 以左按钮为例，点击切换显隐
const leftBtn = document.querySelector('.left');
const container = document.querySelector('.page-container');

leftBtn.addEventListener('click', () => {
  leftBtn.classList.toggle('hidden');
  container.classList.toggle('hide-left');
});

方案二：CSS Grid（更简洁，无需手动调内边距） #

用Grid布局自动分配空间，按钮隐藏后文本自动占满可用宽度：

.page-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 100vh;
  gap: 15px; /* 文本和按钮之间留空隙 */
  padding: 0 15px;
}

.side-btn.hidden {
  display: none;
}

.center-text {
  text-align: center;
  word-wrap: break-word;
}

这种方案下，按钮隐藏后Grid会自动把中间的文本列拉宽，完全不用额外调整样式，省事。

注意点 #

• 别给文本容器设固定宽度，让它自适应剩余空间
• 按钮用绝对定位（Flex方案）或者Grid列（Grid方案），别跟文本抢位置
• 长文本一定要开自动换行，避免横向溢出

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