如何使宽度80%的.con-order容器整体居中而非内容文本居中？

嘿，我懂你现在遇到的困扰——用text-align: center;只让容器里的文本居中了，但整个.con-order容器并没有在页面（或父容器）里居中，对吧？这很正常，因为text-align属性是用来控制容器内部的行内/行内块元素的对齐方式，对块级容器本身的位置完全没影响。下面给你几个实用的解决办法，结合你的LESS代码来调整：

方法一：经典margin:auto法（最推荐） #

这是块级元素水平居中的标准方案，只要你的容器已经设置了明确宽度（你这里已经设了width: 80%），直接给容器添加左右自动外边距就行，完全不会影响内部内容的布局：

.con-order {
  height: 100%;
  width: 80%;
  overflow: hidden;
  /* 新增这行，实现容器水平居中 */
  margin: 0 auto;
}

原理很简单：块级元素设置固定/百分比宽度后，将左右margin设为auto，浏览器会自动分配左右两侧的空白边距，让容器刚好在父元素的水平中间位置。

方法二：Flex布局法（灵活适配复杂场景） #

如果你的.con-order有父容器，可以给父容器添加Flex布局属性，这种方式更灵活，后续如果需要做垂直居中也很方便：
假设父容器的类是.parent-box，LESS代码如下：

.parent-box {
  display: flex;
  justify-content: center; /* 控制子元素水平居中 */
  /* 如果需要同时垂直居中，再加这行：align-items: center; 记得给父容器设置高度，比如height: 100vh; */
}

/* 你的.con-order样式保持不变即可 */
.con-order {
  height: 100%;
  width: 80%;
  overflow: hidden;
}

方法三：Grid布局法（快速实现双方向居中） #

和Flex类似，用Grid布局可以快速让容器同时水平+垂直居中，同样是给父容器设置样式：

.parent-box {
  display: grid;
  place-items: center; /* 同时实现水平和垂直居中 */
  height: 100vh; /* 按需设置父容器高度，比如占满视口高度 */
}

/* .con-order样式无需修改 */
.con-order {
  height: 100%;
  width: 80%;
  overflow: hidden;
}

再补充一句：你之前用text-align: center;导致内容异常，大概率是因为这个属性让容器内部的一些块级元素也被当成行内元素处理了（比如你的.alert组件），所以才会出现布局混乱，现在换成上面的方法就可以避免这个问题啦～

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