如何将设置display:flex的箭头容器div移至页面中心区域

我找了好一会儿都没解决，可能是搜索方法不对，麻烦帮忙搞定。我想把两个箭头移到目标位置，已经给容器设了display:flex属性，相关代码如下：

HTML代码 #

<div class="divarrows">
   <p class="arrow1">&#9655;</p>
   <p class="arrow2">&#9655;</p>
</div>

CSS代码 #

.arrow1 {
    transform: scaleX(-1);
    font-weight: bold;
}

.arrow2 {
    font-weight: bold;
}

.arrow1:hover, .arrow2:hover {
    color: #54B3A1;
}

.divarrows{
    display: flex;
    justify-content: space-between;
    margin: 30px;
    align-self: center;
}

解决方法 #

从代码和需求来看，可通过以下几种方式调整箭头位置：

1. 绝对定位精准控制
   如果箭头需要相对于某个父容器固定位置，先给父容器添加相对定位，再给箭头容器设置绝对定位：

/* 假设包裹箭头的父容器类名为wrapper，需根据实际结构调整 */
.wrapper {
  position: relative;
}

.divarrows{
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 20px; /* 按需调整左右距离 */
  right: 20px;
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%);
  margin: 0; /* 移除默认margin避免干扰 */
}

2. 调整flex布局属性
   如果不需要绝对定位，修改容器的对齐方式和外边距：

.divarrows{
  display: flex;
  justify-content: space-between;
  margin: 0 30px; /* 上下边距清零，左右保留间距 */
  align-self: flex-start; /* 或flex-end，根据目标位置选择 */
}

3. 重置p标签默认样式
   p标签自带默认外边距，可能会偏移箭头位置，建议重置：

.arrow1, .arrow2 {
  margin: 0; /* 清除默认边距 */
}

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