画像を上下左右の中央に配置する方法

• text-align:center; による左右中央配置
  →　コード例：Codepenでコードを確認
  
  
•  margin:0 auto; による左右中央配置
  →　コード例：Codepenでコードを確認
  【注意】
  imgの幅に対して枠imageboxの幅が大きいことが確定した後に配置することが必要。確定する前に配置すると中央に配置されない。
  初期値がdisplay:block;となっている p、div、ul、h1〜h6などのタグでは必要ないが、初期値がinlineとなっているa,span,imgなどのタグの場合は、display:block；やdisplay:table-cell;にして、画像の横幅を有効にすることが必要
  
  
• vertical-align:middle;による上下中央配置
  →　コード例：Codepenでコードを確認
  　
• position:absoluteによる上下中央配置
  →　コード例：Codepenでコードを確認
  　
• display:flex;align-items: center;による上下中央配置
  →　コード例：Codepenでコードを確認
  　
• display:flex;align-items: center;,justify-content: center;による上下左右中央配置例
  →　コード例：Codepenでコードを確認
  　
• position:absoluteによる上下左右中央配置
  →　コード例：Codepenでコードを確認