IEでmargin:autoが効かない

ページを作り動作確認しています。
IEで上下中央揃えにしたい箇所があるのですが、上寄せ表示されます。
現在、「@media all and (-ms-high-contrast: none) 」でmargin-topを150pxにして少しmarginを取って(上下中央揃いではないですが)表示させているのですが、他の方法でIEで上下中央揃いにする方法を教えて頂けますか。よろしくお願いします。

<section class="w3l-banner-3-main">
<div class="banner-3">
<div class="wrapper">
<div class="cover-top-center-9">
<div class="w3ls_cover_txt-9">
/*ここがIEでは左右中央揃えのみで上下中央揃えにならず上寄せされる*/
<div class="svgwrap">
</div>
</div>
</div>
</div>
</div>
</section>

〇CSS
.w3l-banner-3-main {

}

.w3l-banner-3-main .banner-3 {
background: url(../images/1.jpg) no-repeat left;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
position: relative;
background-repeat: repeat-x;
animation: slideleft 10000s 5s infinite linear;
-webkit-animation: slideleft 10000s 5s infinite linear;
z-index: 0;
}

.w3l-banner-3-main .banner-3:before {
content: "";
background: rgba(16, 16, 16, 0.46);
position: absolute;
top: 0;
min-height: 100%;
left: 0;
right: 0;
z-index: -1;
}

.w3l-banner-3-main .cover-top-center-9 {
min-height: 36em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 72vh;
}

.w3l-banner-3-main .w3ls_cover_txt-9 {
max-width: 750px;
text-align: center;
margin: auto;
}

.svgwrap {
position: relative;
width: 100%;
height:100px;
}

/*IE*/
@media all and (-ms-high-contrast: none) {
.w3l-banner-3-main .w3ls_cover_txt-9 {
max-width: 750px;
text-align: center;
margin:150px auto auto auto;
}
}

No.1 ベストアンサー 回答者： fujillin 回答日時： 2021/08/04 18:05

こんにちは

IEの場合、flexには不完全対応のようです。
maginの設定があると悪さをするとか、いろいろ・・・
https://qiita.com/nyawach/items/47b85dcb488bec8e …

なさりたいことは「.cover-top-center-9」要素内で「.w3ls_cover_txt-9」要素を上下左右に中央配置にしたいのだろうと解釈しました。
ご提示のCSSが少々複雑で読み解くのが面倒なので、単純化して以下で表示すると添付画像のようになります。
（とは言え、IEもそろそろ寿命なのではなかったかなぁ？）

HTMLはご提示のままです。
（赤、青の枠線と、緑の背景色は要素位置確認のためのものです）

.cover-top-center-9 {
height: 72vh;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red; /* 確認用 */
}

.w3ls_cover_txt-9 {
max-width: 750px;
text-align: center;
border: 1px solid blue; /* 確認用 */
}

.svgwrap {
position: relative;
width: 100%;
height:100px;
background-color: green; /* 確認用 */
}

※ .cover-top-center-9 のCSSで「height: 72vh;」を「min-height: 72vh;」にするとダメになるようです。
どうしてもmin-heightが必要な場合は、.cover-top-center-9 ではなく、その親要素などで制御しておいて当該要素は「height: 100%;」などとしておけば良いのではないかと想像します。（←未検証です）
※ また、flex に拘らなくても良いのであれば、少し旧い方法でレイアウトすることで、問題なく中央寄せは可能と思います。
https://www.yoheim.net/blog.php?q=20200601

この回答へのお礼

遅くなり申し訳ございません。
そして、ありがとうございます。
無事に縦横中央に配置することができました。
早々にご返信いただいたのに遅くなり申し訳ございませんでした。

お礼日時：2021/08/20 16:09