いろんなことの備忘録

音楽とかwebとか

テーブルを使わない天地中央揃え ie9以上対応 css

テーブルを使えない場面で天地中央の必要があったのでまとめました
動的で何行でるかわからなかったのでtransformで対応しました
実際このコードでうまくいってるか確認してないので間違ってるかもしれません...

ベースのhtml

<main>
	<div class="box">
		このdivタグを中央揃えしたい。
	</div>
</main>

<style>

	html, body, main {
		height: 100%;
	}

	.box {
		border-radius: 4px;
		border: 1px solid #E63E3E;
		width: 300px;
		height: 200px;
	}

</style>


Flexbox // IE11以上

main {
	display: flex;          
	justify-content: center;
	align-items: center;    
}

たった4行! CSS3 Flexboxを使った史上最短の上下中央揃え2016年版 - Qiita


calc() // IE9以上

.box {
	margin: calc(50vh - 100px) auto;
}

天地中央1行


transform // IE9以上

.box {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	 transform: translateY(-50%);
}

[CSS]たった3行のスタイルシートで高さ不明の要素に対して天地中央に配置するテクニック(IE9にも対応) | コリス