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

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

● position : absolute でセンタリング

親DIVに

position: relative;

を指定してから、センタリングしたい要素に以下の指定を行います。

.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

どちらも Windows IE11 OK! です

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

添付ファイル1
添付ファイル2
No.1249
01/25 15:20

edit

添付ファイル