position

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

文字を画像の中央に

top:50%、left:50%とすることで文字の左端が画像の中央に配置されます。
加えてtransform:translate(-50%,-50%)で文字のずれを修正することができます。

.example {
  position: relative;
  }

.example p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  /*文字の装飾は省略*/
  }

.example img {
  width: 100%;
  }