背景画像の上に画像を中央表示するには。

背景画像として、repeat-xで1px画像を横幅いっぱい表示しております。
背景の上に画像を中央表示したのですが、どう書いていいかわかりません。
ご教示ください。

補足いたします。
背景の上の画像ですが、左右上下中央表示にしたいです。
また、画面サイズの変更があっても常に上の画像については左右上下表示で見える状態にしたいです。
画面サイズの変更で切れるのは背景画像が左右から狭まるイメージになります。

aKusano

2015/12/11 02:18

単に背景の上に画像を中央表示といっても、様々なケースが考えられます。左右だけ中央になればいいのか、上下も中央にしたいのか、固定レイアウトなのか、可変レイアウトなのかetc。もう少し具体的なデザイン仕様（条件）を提示してください。

行動規範の内容に同意します

回答1件

ベストアンサー

背景画像を表示する領域の中には画像が1つだけ

という条件であれば、
0. paddingで調整
0. position:absolute
0. 仮想テーブルレイアウト

などの方法が考えられます。
とりあえず以下のHTML構造に対して画像を中央に配置するサンプルを書いておきます。

HTML
1<div class="bg">
2<img src="hoge.jpg" width="100" height="100" alt="">
3</div>

###paddingで調整する場合
左右中央はtext-align:center、上下中央は上下均等のpaddingで画像を真ん中に配置します。

CSS
1.bg {
2  width: 800px; /*任意の幅*/
3  padding: 100px 0; /*上下paddingに同じ値を入れてコンテンツを上下中央配置に見せる*/
4  text-align: center; /*中身を左右中央揃えにする*/
5}

###position:absoluteの場合
position:absolute;とmargin:autoの組み合わせで上下左右中央に配置します。

CSS
1.bg {
2  position:relative;
3  width: 800px; /*任意の幅*/
4  height: 300px; /*任意の高さ*/
5}
6.bg img {
7  position: absolute;
8  left: 0;
9  right: 0;
10  top: 0;
11  bottom: 0;
12  margin: auto;
13}

###仮想テーブルの場合
.bgをtd要素相当の表示属性に変更し、その中でtext-align/vertical-alignで真ん中に配置します。

CSS
1.bg {
2  width: 800px; /*任意の幅*/
3  height: 300px; /*任意の高さ*/
4  display: table-cell;
5  text-algin: center;
6  vertical-align: middle; /*セル内で上下中央揃えにする*/
7}