色々なサイズの画像を親要素内に中央表示する

色々なサイズの画像を、親要素の領域内の上下左右中央位置に配置する方法を試してみます。

サンプルコード

.imageの領域の上下左右中央位置に配置します。

HTML

<div class="list">
	<div class="item">
		<div class="image">
			<img src="https://via.placeholder.com/800x600">
		</div>
	</div>
	<div class="item">
		<div class="image">
			<img src="https://via.placeholder.com/800x200">
		</div>
	</div>
	<div class="item">
		<div class="image">
			<img src="https://via.placeholder.com/400x600">
		</div>
	</div>
	<div class="item">
		<div class="image">
			<img src="https://via.placeholder.com/120x90">
		</div>
	</div>
	<div class="item">
		<div class="image">
			<img src="https://via.placeholder.com/80x120">
		</div>
	</div>
	<div class="item">
		<div class="image">
			<img src="https://via.placeholder.com/350x150">
		</div>
	</div>
</div>

CSS

.list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.item {
	width: 21%;
	margin: 2%;
}
.image {
	position: relative;
	height: 200px;
	background: #eeeeee;
}
.image img {
	max-width: 100%;
	width: auto;
	max-height: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

主なポイントはハイライトにしている部分です。
16～19行目で縦横比を維持したまま親要素内に収まるようにサイズ調整をして、20～23行目で上下左右中央位置に配置させています。
高さ固定の領域に上下左右中央配置するデモページ

.imageの高さを可変にすることも可能です。

CSS

.list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.item {
	width: 21%;
	margin: 2%;
}
.image {
	position: relative;
	padding-top: 75%; /* 3(縦) / 4(横) * 100 */
	background: #eeeeee;
}
.image img {
	max-width: 100%;
	width: auto;
	max-height: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

12行目で幅に合わせて高さを設定するようにしています。
今回は領域の比率を4:3にしたかったので、縦 / 横 * 100 で75%を指定しました。
高さ可変の領域に上下左右中央配置するデモページ