CSS响应式布局中class为commun的div无法居中问题求助

你目前的代码没有给.commun元素配置任何居中相关样式，块级div默认会撑满父元素全宽、内容沿左侧排列，你仅给内部.think类设置了文本居中，没有处理.think本身以及外层.commun的位置，所以整体会默认靠左。

以下是两种适配响应式场景的修复方案，选一种使用即可：

• 方案1：自动外边距居中（和你现有代码适配度最高）
  直接在CSS中追加.commun的样式，设置匹配宽度+左右自动外边距即可：

  .commun {
    width: 90%; /* 和内部.think的宽度保持一致，也可以按需调整为目标宽度 */
    margin: 0 auto; /* 上下外边距为0，左右外边距自动均分剩余空间，实现水平居中 */
  }
  

  注意：这个方案要求居中的块级元素必须设置明确宽度，否则元素会默认撑满父容器宽度，不会出现居中效果。

• 方案2：Flex布局居中（灵活度更高，适配复杂响应式布局）
  给.commun的父元素.rapper添加Flex布局属性，不需要给.commun设置固定宽度就能实现居中，后续如果需要加垂直居中需求也很方便扩展：

  .rapper {
    display: flex;
    justify-content: center; /* 控制子元素水平居中 */
    /* 要是需要同时做垂直居中，再加下面这行即可 */
    /* align-items: center; */
  }
  

顺便提一句你现有代码的小问题：把<button>嵌套在<a>标签里不符合HTML规范，交互元素不要互相嵌套，不然容易出现点击行为异常，直接把按钮样式加在<a>标签上，去掉内层的button元素就行。

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