如何实现两个按钮及带文本内容的边框子元素居中对齐？

要实现两个按钮整体居中、按钮内文本居中且按钮边框对齐的效果，可按以下方式修改代码：

1. 调整CSS样式 #

/* 父容器：实现按钮组整体居中 */
.btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
}

.btn {
  border-radius: 2.5px;
  border-style: solid;
  border-width: 5px;
  padding: 5px 15px;
  
  /* 统一按钮宽度，避免文本长度不同导致边框错位 */
  width: 180px;
  
  /* 确保按钮内文本居中 */
  text-align: center;
}

2. 修改HTML结构 #

通过父容器包裹按钮，实现整体居中布局：

<div class="btn-group">
  <h1 class="btn">testestest</h1>
  <h1 class="btn">testest</h1>
</div>

关键说明 #

• 利用flex布局的父容器，让两个按钮在页面水平居中且垂直排列，align-items: center保证按钮自身居中对齐。
• 给按钮设置固定宽度（或min-width），确保不同文本长度的按钮边框保持对齐。
• text-align: center已足够让按钮内文本居中，align-items/align-content是flex容器属性，直接加在按钮上无效。

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