HOME > > > 背景画像CSSで設定する時に縦横真ん中に設定する方法

背景画像CSSで設定する時に縦横真ん中に設定する方法

背景を真ん中にする

背景を縦横真ん中に設定する

少し前、CSSを背景で設置する時に縦横真ん中に揃える事がありました。
今まで考えずに設定していたのですが、その時はあれ?縦の真ん中って・・・?とふと考えた事がありました。
特別難しい事はないのですが、ちょっとややこしいので記載しておきます。

サンプルはこちら

cssの設定

特別な事はありません。ただ、「横はcenter」「縦はmiddle」と思っているとアレ?となります。
背景画像を縦真ん中にしたい場合は「middle」ではなく縦も横も「center」にしましょう。
たまにややこしくなって数秒考える時があります。


background: url(背景画像のパス) center no-repeat;

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.06.19