こんにちは、R.Iです。
早いもので今年も残すところ1カ月となりましたね！
今年の目標は痩せる！でしたが、あまり達成できたかんじがしないので、来年も引き続きこの目標に向かって頑張りたいと思います！
いつになったら痩せれるのやら・・・（笑）
さて、今回は以前書いた記事サムネイルを表示させる時に便利なやつの派生版として、今回はサムネを勝手に上下左右中央配置してくれる素敵なCSSちゃんをご紹介します。
前回の記事ではいちいちtopから●px、leftから●pxなど指定しないといけないものでしたが、とりあえず真ん中らへんが見えてりゃいいよ！的なゆる案件で使ってみてください。
CSS3を使っているので、対応ブラウザは確認しておきましょう！
まずはコードを。
HTML
<span id="thumb-box"><img src="images/thumb.gif" width="300" heigh="450" alt="中央配置したいサムネ" /></span>CSS
#thumb-box {
position: relative;
display: block;
width: 300px;
height: 300px;
overflow: hidden;
}
#thumb-box img {
position: relative;
top: 50%;
left: 50%;
width: 100%;
height: auto;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);/*IE9*/
}
こんな画像を
こんなかんじで表示してくれます。
topとかleftで左上から50%に配置したimgを、transformでぐいっと-50%まで戻してあげているので真ん中にくるイメージです。
spanに対してoverflow:hidden;をかけてあげているので、黄色の斜線部分は表示されないようになっています。
以上となります。
ではまた。
R.I
