CSS如何设置上下自动内边距让轮播导航箭头占满图片全高

方案1：绝对定位实现（通用性最高，适配绝大多数轮播布局） #

1. 先给箭头的父级容器（即和轮播图等高的外层包裹元素）添加定位属性：

.轮播父容器类名 {
    position: relative;
}

2. 修改.arrow的CSS规则，新增拉伸和内容居中相关属性：

.arrow {
    font-size: 18px;
    padding-right: 7px;
    padding-left: 7px;
    background-color: rgba(22,22,22,0.29);
    color: #ffffff;
    /* 新增属性 */
    position: absolute;
    top: 0;
    bottom: 0;
    /* 箭头内容垂直居中 */
    display: inline-flex;
    align-items: center;
}
/* 分别给左右箭头设置水平定位 */
.arrow-left {
    left: 0;
}
.arrow-right {
    right: 0;
}

原理：同时设置top:0和bottom:0后，绝对定位元素会自动拉伸至和相对定位的父元素等高，父元素高度随轮播图响应式变化时，箭头高度会同步自适应。

方案2：flex布局实现（适合父容器已用flex布局的场景） #

如果你的轮播区域父容器已经采用flex布局，直接给.arrow添加以下属性即可：

.arrow {
    /* 原有属性保留 */
    align-self: stretch;
    display: inline-flex;
    align-items: center;
}

原理：align-self: stretch会让flex子项自动撑满父容器的交叉轴高度，同样实现自适应等高效果。

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