WEB制作(html・css(スタイルシート))に関する各種メモ書き

cssで position : absolute な要素を中央に配置する(上下左右センタリング)

● position : absolute でセンタリング

.absolute_center {
	position  : absolute;
	top       : 50%;
	left      : 50%;
	transform : translate(-50%, -50%);
}

デモ : https://pgmemo.tokyo/data/filedir/1249_1.html

● margin vh でセンタリング

.margin_vh_center {
	margin    : 50vh auto 0;
	transform : translateY(-50%);
}

デモ : https://pgmemo.tokyo/data/filedir/1249_2.html

どちらも IE11 OK! です

引用 : https://coliss.com/articles/build-websites/operation/css/absolute-centering-with-css.html

添付ファイル1
添付ファイル2
No.1249
06/15 18:30

edit

添付ファイル