min-heightとalign-items centerの組み合わせがIE11で効かない

2020.11.26

flexboxのalign-items: centerとmin-heightを組み合わせて設定した際、IE11でだけ上下中央位置にならないことがあったので、対応方法をメモ。

サンプルコード

まずは対応前のサンプルです。

<a class="c-btn" href="">ボタン</a>

ボタンの高さをmin-height:で可変にして、複数行になった場合に高さが伸びるようにしています。

.c-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	min-height: 45px;
}

これでchromeなどは意図した表示になったのですが、IE11だけalign-items: centerが効かずテキストが上寄りになっていました。
対応前のデモページ

min-heightとalign-itemsの組み合わせに問題があるようで、min-heightをheightにするとIEでも意図した表示になりました。

.c-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 45px;
}

高さを固定にして問題ない場合はこの対応でよいのですが、今回はテキストが複数行の場合に高さが伸びるようにしたかったので別の方法も検討してみました。
いくつか試した結果、ボタンのラッパー要素を追加して、その要素にdisplay: flexを指定する形でも解消できるようでした。

<div class="c-btn-wrapper">
	<a class="c-btn" href="">ボタン</a>
</div>

.c-btn-wrapper {
	display: flex;
}
.c-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	min-height: 45px;
}

参考サイト

土