Jquery 如何在div元素中垂直和水平居中放置文本

我想将文本置于div元素中图像上方的中心

这就是我所尝试的：

CSS:

Html:

开始吧！

显然，它没有起作用。网站是响应性的，因此解决方案也应该是响应性的

我环顾四周，尝试了很多不同的方法，但都不奏效。 我不知道，但也许jquery有一个解决方案？

---

谢谢：）

代码>职位：相对和

显示：内联块

（或者您可以在父元素上

浮动

它），这样它将在图像周围绘制一个相对定位的正方形，然后

顶部：50%；转化：translateY（-50%）；左：0；右：0以使文本居中


.container{
保证金：0自动；
最大宽度：1200；
}
.标题{
宽度：100%；
}
.戒指{
最大宽度：100%；
位置：相对位置；
}
.细胞{
位置：相对位置；
显示：内联块；
}
.flex_文本{
位置：绝对位置；
颜色：#B64547；
z指数：100；
字体系列：Poppins；
字体大小：30px；
文本对齐：居中；
最高：50%；
保证金：0；
左：0；右：0；
转化：translateY（-50%）；
}
.细胞免疫球蛋白{
显示：块；
}

开始吧！
 > 这里可以考虑使用Flex。< /P>
检查此代码段


.grid{
位置：相对位置；
}
.细胞{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.flex_文本{
位置：绝对位置；
颜色：红色；
}
.cell img{}

开始吧！
另一个问题不需要jquery解决方案//获取divs var flex_text=$（'.flex_text'）；var container=$（'.container'）；//查找子变量和父变量之间宽度差的一半左=（container.width（）-flex_text.width（））/2；//添加父对象的当前左侧位置，并设置左侧css值left+=container.offset（）.left；flex_text.css（'left'，left）；//对top position var top=（container.height（）-flex_text.height（））执行相同的操作/2；top+=容器.offset（）.top；flex_text.css（'top'，toppy）；非常感谢。这是非常好的工作！我还不了解transfrom:translateY（-50%）属性，但我刚刚开始学习webdesign，所以我会学习它；）@杰诺斯太棒了，不客气。这会使一个元素的高度上升50%。
    .container {
  margin: 0 auto;
  max-width: 1200;
}
.header {
    width: 100%;
}
.ring {
    max-width: 100%;
    position: relative;

}
.flex_text  {
    position: absolute;
    color: #B64547;
    z-index: 100;
    font-family: Poppins;
    font-size: 30px;
    text-align: center;
}


.cell img {
    display: block;
}

<div class="container">
    <div class="grid">
        <div class="cell">
            <h4 class="flex_text">Brewing, get started!</h4>
            <img src="img/Kaffe_1.jpg" alt="Ring1" class="ring">
        </div>