如何居中.dolar与.euro div？Flex布局失效问题求助

核心思路：无需移除Flex布局，通过调整Flex容器的对齐属性即可实现居中，同时保留原有布局结构 #

1. 实现水平+垂直双向居中 #

假设包裹.dolar和.euro的父容器类名为.currency-wrap（替换为你实际的父容器选择器），修改父容器CSS：

.currency-wrap {
  display: flex;
  /* 保留你原有Flex布局的属性，比如flex-wrap: wrap; flex-direction: row; 等 */
  justify-content: center; /* 主轴（默认水平）方向居中 */
  align-items: center; /* 交叉轴（默认垂直）方向居中 */
  min-height: 300px; /* 按需设置，确保垂直居中效果可见，比如继承父级高度或设为100vh */
}

关键属性解释：

• justify-content: center：控制Flex子元素在水平方向的对齐，直接让.dolar和.euro在父容器水平居中。
• align-items: center：控制子元素在垂直方向的对齐，配合父容器的高度设置，实现垂直居中。
• 保留原有Flex属性（如flex-wrap），不会破坏你之前的布局结构。

2. 仅实现水平居中（垂直方向保持原有布局） #

如果只需要水平居中，仅给父容器添加一行属性即可：

.currency-wrap {
  display: flex;
  justify-content: center; /* 仅水平居中 */
  /* 保留原有其他Flex属性，比如align-items: flex-start; 或默认值 */
}

3. 子元素自身内容居中（额外需求） #

如果需要让.dolar和.euro内部的文本、图标等内容居中，给子元素添加：

.dolar, .euro {
  text-align: center; /* 让内部行内/行内块元素居中 */
}

如果子元素设置了固定宽度，想让它自身在父容器内水平居中，可补充：

.dolar, .euro {
  margin: 0 auto; /* Flex布局下依然生效，让子元素在可用空间内水平居中 */
}

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