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

Question

我正在页面上生成渐变。如何在此功能区的中心叠加图像？我需要将图像居中，但我似乎无法弄清楚如何进行这项工作。我正在使用 Bootstrap 并且页面是响应式的。所以当页面变小时它需要保持在一起。感谢您的帮助!

期望的结果:

#ribbon-background { 
	background: #ed1c24; /* Old browsers */
	background: -moz-linear-gradient(left,  #ed1c24 0%, #600000 50%, #ed1c24 100%); /* FF3.6-15 */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ed1c24), color-stop(50%,#600000), color-stop(100%,#ed1c24)); /* Chrome4-9,Safari4-5 */
	background: -webkit-linear-gradient(left,  #ed1c24 0%,#600000 50%,#ed1c24 100%); /* Chrome10-25,Safari5.1-6 */
	background: -o-linear-gradient(left,  #ed1c24 0%,#600000 50%,#ed1c24 100%); /* Opera 11.10-11.50 */
	background: -ms-linear-gradient(left,  #ed1c24 0%,#600000 50%,#ed1c24 100%); /* IE10 preview */
	background: linear-gradient(to right,  #ed1c24 0%,#600000 50%,#ed1c24 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#ed1c24',GradientType=1 ); /* IE6-9 */
	border-top: 3px solid #000;
	border-bottom: 3px solid #000;
	box-shadow: 0 7px 0 #FFF inset,
				0 -7px 0 #FFF inset;
    height: 65px;
    margin: 0 auto;
    width: 100%; 
	z-index: 99;
}

<div id="ribbon-background"></div>

Answer 1

一种方法是给丝带一个 position: relative;并将跟随样式添加到 child <img> :

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

演示:

#ribbon-background {
  background: #ed1c24;
  /* Old browsers */
  background: -moz-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%);
  /* FF3.6-15 */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ed1c24), color-stop(50%, #600000), color-stop(100%, #ed1c24));
  /* Chrome4-9,Safari4-5 */
  background: -webkit-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%);
  /* Opera 11.10-11.50 */
  background: -ms-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%);
  /* IE10 preview */
  background: linear-gradient(to right, #ed1c24 0%, #600000 50%, #ed1c24 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#ed1c24', GradientType=1);
  /* IE6-9 */
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  box-shadow: 0 7px 0 #FFF inset, 0 -7px 0 #FFF inset;
  height: 65px;
  margin: 0 auto;
  width: 100%;
  z-index: 99;
  position: relative;
}

#ribbon-overlay-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="ribbon-background">
  <img id="ribbon-overlay-img" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png">
</div>