このロールオーバー画像がページ中央に揃っていないのはなぜですか？
私は考えることができるすべての方法を試しましたが、どれもうまくいきません。このロールオーバーイメージをページの中央に揃える方法は？
<img src="IMG1" align="middle"
onmouseover="this.src='IMG2'"
onmouseout="this.src='IMG1'" width="1008" height="175"/>
ページの中央に水平に中央に配置することはできません。
flexを表示するように設定された<div>にイメージをラップしたいとします（フレックスには<body>を設定しません）。
フレックスボックスを使用すると、非常に迅速に<div>の真ん中にイメージを置くことができます！コンテナに画面の高さを表示させたい場合は、<div>ラッパーを100vhに設定するだけです。
また、スラッシュの後にサイズを入れないでください。私はこれが役に立てば幸い
<div class="container">
<img src="img1" onmouseover="this.src='img2'" onmouseout="this.src='img1'"/>
</div>
.container {
display: flex;
justify-content: center;
align-items:center;
height: 100vh;
}
img {
height: 200px;
}<div class="container">
<img src="https://i.stack.imgur.com/dusjG.png"
onmouseover="this.src='https://i.stack.imgur.com/0RSNI.jpg'"
onmouseout="this.src='https://i.stack.imgur.com/dusjG.png'"/>
</div>！
それは動作しませんでした：（良い方法がある、それはロールオーバー画像だので、3つがある – HTMLHelp
私はちょうど私のために働くウルJSを使用してペンを更新しました –
[div内の画像を縦に並べる方法は？]（https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div） – Martin