Html 不确定如何在渐变上正确定位图像

我在页面上生成一个渐变。如何将图像覆盖在此功能区的中心？我需要将图像居中，但我似乎不知道如何使其工作。我使用的是bootstrap，页面响应速度很快。因此，当页面变小时，它需要保持在一起。感谢您的帮助

预期结果：

带状背景{ 背景：ed1c24；/*旧浏览器*/ 背景：-moz线性梯度左，ed1c24 0%，600000 50%，ed1c24 100%；/*FF3.6-15*/ 背景：-webkit gradientlinear，左上，右上，颜色停止0%，ed1c24，颜色停止50%，600000，颜色停止100%，ed1c24；/*Chrome4-9，Safari4-5*/ 背景：-webkit线性梯度左，ed1c24 0%，600000 50%，ed1c24 100%；/*Chrome10-25，Safari5.1-6*/ 背景：-o-线性梯度左，ed1c24 0%，600000 50%，ed1c24 100%；/*Opera 11.10-11.50*/ 背景：-ms线性梯度左，ed1c24 0%，600000 50%，ed1c24 100%；/*IE10预览*/ 背景：向右线性梯度，ed1c24 0%，600000 50%，ed1c24 100%；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/ 过滤器：progid:DXImageTransform.Microsoft.gradient startColorstr='ed1c24'，endColorstr='ed1c24'，GradientType=1；/*IE6-9*/ 边框顶部：3px000； 边框底部：3px固体000； 框阴影：0 7px 0 FFF插图， 0-7px 0 FFF插图； 高度：65px； 保证金：0自动； 宽度：100%； z指数：99； }

---

一种方法是给功能区一个位置：相对；并将跟随样式添加到子对象

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);