带边框和Font Awesome图标Div无法居中的解决求助

你当前的#buttons容器设置了固定宽度，但text-align: center仅能让容器内部的文本和图标居中，无法让容器本身在父级中居中。要实现和上方“My Info”一样的整体居中效果，有两种简单可行的方法：

方法一：使用margin实现块级元素居中 #

给#buttons添加margin: 0 auto样式，这是块级元素水平居中的经典方案，适用于已设置固定宽度的元素：

修改后的CSS代码：

.title {
  font-size: 350%;
  margin-top: 100px;
}

.text {
  text-align: center;
}

#buttons {
  text-align: center;
  width: 130px;
  border: 2px solid;
  padding: 10px;
  border-radius: 25px;
  margin: 0 auto; /* 新增：让容器水平居中 */
}

方法二：使用Flex布局实现居中 #

给#buttons的父容器（比如body）添加Flex布局样式，这种方式更灵活，无需依赖元素的固定宽度：

修改后的CSS代码：

body {
  display: flex;
  flex-direction: column;
  align-items: center; /* 让子元素水平居中 */
}

.title {
  font-size: 350%;
  margin-top: 100px;
}

.text {
  text-align: center;
}

#buttons {
  text-align: center;
  width: 130px;
  border: 2px solid;
  padding: 10px;
  border-radius: 25px;
}

两种方法都能让#buttons容器整体水平居中，你可以根据自己的布局需求选择其中一种。

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