CSS 画像を水平方向と垂直方向の中央に配置する 3 つの方法

行の高さを設定する

img 要素がインラインの高速要素であることがわかっているため、最初に image 要素の親要素のテキストが水平方向の中央に配置されるように設定し、行の高さが全体の高さと一致するようにします。
2 番目に重要なことは、image 要素のvertical-align 属性を middle に設定することです。これは、要素が配置されている行のベースラインに対するインライン要素のベースラインの垂直方向の配置を定義します。
コード例:

<style>
	div {
    
    
		height: 300px;
		text-align: center;
		line-height: 300px;
	}
	img {
    
    
		vertical-align: middle;
	}
<style>

<div>
	<img src="./pic.png">
</div>

位置決めと移動の使用

具体的な方法は、最初に位置決めを使用して画像を親要素の右と下に 50% オフセットし、次に画像をそれ自体に対して左と上に 50% オフセットして、画像が水平方向と垂直方向の中央に配置されるようにします。親要素内。
コード例:

<style>
	div {
    
    
		height: 300px;
		position: relative;
	}
	img {
    
    
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
<style>

<div>
	<img src="./pic.png">
</div>

フレックスボックスを使用する

画像要素の親ボックスをフレックスボックスに設定し、項目が主軸と交差軸の両方の中心に配置されるようにします。

<style>
	div {
    
    
		height: 300px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
<style>

<div>
	<img src="./pic.png">
</div>