Html 垂直居中对齐图像上的figcaption

我试图在图像上以居中的方式对齐

figcaption

：

到目前为止，我有以下代码：

.portfolio-item figcaption{
    position: relative;
    top: -40px;
    left: -20px;
    width: 280px;
    background: rgb(52,152,219);
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 10px 5px 10px 5px;
}

对于以下HTML：

<!-- PORTFOLIO IMAGE 1 -->

<div class="portfolio-item">
    <figure>
        <img  src="assets/img/portfolio/folio01.jpg" alt="">
        <figcaption>
                <h5>UI DESIGN</h5>
                <a data-toggle="modal" href="#myModal" >Take a Look</a>
        </figcaption>
    </figure>
</div>

用户界面设计

---

问题是，为了使它居中，我使用

left:-20px这肯定不是那么灵敏。有什么想法吗？谢谢
Flexbox可以做到这一点。您不需要使用相对（或绝对）定位


使整个
图
元素成为具有
列
方向的柔性容器
用
对齐项目：居中对齐图像和标题

使用flex
order
属性切换图像和标题的顺序


图{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.投资组合项目figcaption{
订单：-1；/*所有弹性项目的默认值为1*/
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
宽度：280px；
背景：rgb（52152219）；
颜色：白色；
填充：10px 5px 10px 5px；
/*除去
位置：相对位置；
顶部：-40px；
左：-20px*/
}

用户界面设计

图{
位置：相对位置；
高度：400px；
边框：1px红色虚线；
}
图>img{
位置：绝对位置；
左：50%；/*水平对齐*/
变换：translateX（-50%）；/*水平对齐（微调）*/
z索引：-1；/*始终将图像保持在figcaption下*/
}
图>figcaption{
位置：绝对位置；
顶部：40%；/*垂直对齐*/
左：50%；
转化：translateX（-50%）；
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
宽度：280px；
背景：rgb（52152219）；
颜色：白色；
填充：10px 5px 10px 5px；
}

用户界面设计
使用百分比而不是px您的代码不够，但请尝试使用
边距：0 auto
并删除
left
属性。此外，您的填充可以简化为这样：
padding:10px 5px
无需重复相同的值两次。感谢您提供的填充提示。但是页边空白不起作用。（我发布了另一个答案。希望能有所帮助。谢谢，flexbox一款非常适合我，因为我对它比较熟悉，而且它的效果很好！事实上，我不得不使用order:1；我会尝试一下，但top-40是因为它与图像重叠。所以我需要删除top属性以使它起作用（是的，它起作用！）但是，我需要在图片上覆盖40px的标题…有什么想法吗？非常感谢！编辑：找到我的方法：底部40px工作；）