重複の可能性：
divを水平方向および垂直方向に中央揃えする方法
垂直方向と水平方向の両方で、HTMLページの中央に画像を配置する必要があります...いくつか試してみましたが、うまくいくようです。私が使用した水平方向の配置を取得するには
<body style="text-align:center">
正常に動作しますが、垂直方向の配置はどうなりますか?
よろしく
質問する
101700 次
4 に答える
23
もしも：
X は画像の幅、
Y は画像の高さ、
それから：
img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -(X/2)px;
margin-top: -(Y/2)px;
}
ただし、このソリューションは、サイトの唯一の要素がこの画像である場合にのみ有効であることに注意してください. ここはそうだと思います。
この方法を使用すると、流動性の利点が得られます。誰かの画面がどれだけ大きいか (または小さいか) は関係ありません。画像は常に真ん中にとどまります。
于 2012-06-26T11:20:34.317 に答える
9
画像をコンテナdivに入れ、次のCSSを使用します（画像に合わせてサイズを変更します）。
.imageContainer{
position: absolute;
width: 100px; /*the image width*/
height: 100px; /*the image height*/
left: 50%;
top: 50%;
margin-left: -50px; /*half the image width*/
margin-top: -50px; /*half the image height*/
}
于 2012-06-26T13:15:25.143 に答える
2
ちょっと今、あなたは体の背景画像に与えることができます
を設定します。background-position:center center;
このように
body{
background:url('../img/some.jpg') no-repeat center center;
min-height:100%;
}
于 2012-06-26T11:17:10.090 に答える
1
目的の効果が正確に何であるかに基づいて、さまざまなオプションが多数あります。Chris Coyier はちょうどこの方法で作品を作成しました。一読の価値あり：
于 2012-06-26T13:20:17.913 に答える