CSSの縦位置の中央配置

今まで、自分のイラストのトップページの画像配置は、CSSの背景画像の手法を使って、中央表示をしていましたが、更新がかなりめんどくさくなりまして、HTMLに書き込んで表示しようと思い立ちました。

上の画像の、点線の中(中央配置)

しかし、これが思ったより難問でした。

CSSでは横位置は簡単に中央配置できるのに
　　 text-align: center;
　　　　　　　↑
　　　　こんなん書くだけ

縦位置の中央配置が、すっごく煩雑。

あちこちのブログの記事を参考にしても、どうもうまくいきません。

いろいろ探しまくりまして、こちらの記事がとても参考になりましたので、お礼の意味を込めて、ご紹介します。

http://otiai10.hatenablog.com/entry/2012/06/24/192032

うまくいかない原因も書いてあって助かりました。

ありがとうございます～♡

うまく行った自分のページは、ここ↓です。

　　　http://annelian.sakura.ne.jp/