画像を画面中央に持っていきたい。テキストテンプレートに文字を記入したい。

HTML ソースコード

<body>
<br/><br/><br/><br/><br/><br/><br/><br/>

<div id="spdayo">
<a href="index.html"><img src="sp1.jpg" alt="ginzagakubuchi" width="589" height="585">
</a>
<div id="coolsright">
<a href="index.html"><img src="givemecoolsright.jpg" alt="Denencho-fu,田園調布2014" width="450" height="460">
</a></div>
</div>

<br/>
<div id="box">
<img src="template1.jpg" width="150" height="50">
<!--#boxtextを入力-->
<div id="boxtext">
<p>Welcome to Tokyo Hill </p>
</div>
</div>

<br/><br/><br/><br/><br/><br/><br/><br/>

<!-- To Be Continued ...
<br><br><br><br><br><br><br>
<center>Copyrights(C) STANDAY 2017 </center>
-->

</body>

ーーーー
CSS

body {
  font-size: 28 px;
  font-family: Times New Roman, sans-serif;
  color: #333;
}

#spdayo{
  margin:0 auto;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#coolsright {
  position: absolute;
  top: 63px;
  left:68px;

}

#box {
  margin-left:　auto;
  margin-right:　auto;
  position: relative;
  margin-top: 290px;
}

#boxtext{
  position:absolute;
  top:100px;
  left:100px;
}


@media only screen and (max-device-width : 480px)
{
  #coolsright {
    position: absolute;
    top: 270px;
    left: 260px;
 }

 #spdayo{
   text-align: center;
   position: relative;
 }
}

また、テキストプレートに影や、ボーダーラインを追記してエフェクトをあげたいです！
どのようにして書いたらベストかご教授ください！
よろしくお願いいたします。