web関連

cssで画像を上下左右真ん中寄せにする方法

2017/12/25

プログラミング

css

ちょいちょい、親要素の中の子要素（画像が多いい）を中心に配置したくなるのですが、毎回調べていたので備忘録です。

サンプルコード

// 親要素
.parent{
	position:relative;
}
// 子要素
.child{
	position: absolute;
 	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
 	-ms-transform: translate(-50%, -50%);
 	transform: translate(-50%, -50%);
}

こんな感じで真ん中寄せになります

子要素は必要に応じて幅と高さを指定しないとうまく真ん中寄せにならないです。

子

意外と使用頻度が高く色々なところで使う、とても便利