web-dev-qa-db-ja.com

HTMLページの中央に画像を配置する方法は？

可能性のある複製：
divを水平および垂直に中央揃えする方法

Htmlページの中央に画像を垂直と水平の両方に配置する必要があります...いくつかのことを試していますが、うまくいくようです。水平方向の配置を取得するには、<body style="text-align:center">を使用しました

そしてそれはうまく動作しますが、垂直方向の配置で何をしますか？

よろしく

htmlcssvertical-alignment
14
Darko Rodic

次の場合：

Xは画像の幅、
Yは画像の高さ、

その後：

img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -(X/2)px;
    margin-top: -(Y/2)px;
}

ただし、このソリューションが有効なのは、サイト上の要素がこの画像のみである場合のみです。ここがそうだと思います。

この方法を使用すると、流動性の利点が得られます。誰かの画面がどれだけ大きい（または小さい）かは関係ありません。画像は常に中央にとどまります。

22
Mateusz Kocz

画像をコンテナ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*/
    }
9
Danny

ねえbody background image

background-position:center center;

このように

body{
background:url('../img/some.jpg') no-repeat center center;
min-height:100%;
}
2
Rohit Azad

目的の正確な効果に基づいて、さまざまなオプションがあります。クリス・コイヤーは、当時この方法で作品を作りました。読む価値がある：

http://css-tricks.com/perfect-full-page-background-image/

1
Eamonn