h1{text-align:center;
}
div{margin-top:0px;}

body {
  background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
}

/*画像の上に文字*/
.example {
  position: relative;
  }

.example p {
  position: absolute;
  top: 80%;
  left: 80%;
  color: black;
  font-weight: bold; /*太字に*/
  font-size: 60px;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  /*文字の装飾は省略*/
  }

.example img {
  width: 100%;
  }
/*ここまで*/


/* トリミング */
/* トリミングしたいサイズで枠を作る */
.trim {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
/* 中央に合わせてトリミング */
.trim img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*ここまで*/