边缘 - 不能水平和垂直居中文本

Question

我尝试将容器中的文本水平和垂直居中。我用这个 css class:

试了一下

.centerVH{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

在 chrome 和 firefox 中工作正常，但在 edge 浏览器中根本不工作。

 @media all{
   
    html {
         font-size: 62.5%;
         -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
         font-size-adjust: 100%;
    }
     #header_cart {
         width: 180px;
    }

    .uppercase{
      text-transform:"uppercase";
    }
    .centerVH{
      display:flex;
      justify-content:center;
      align-items:center;
      text-align:center;
    }

    .minicart-wrapper .action.showcart{
      display:contents;
    }
   
     #header_cart{
        font-size:1rem;
        -webkit-display:grid;
        -moz-display:grid;
        -ms-display:grid;
        display:grid;
        grid-template-columns:0% 1fr;
        float:unset;
    }
     #header_cart i{
        color:#39464f;
    }
    
     #mini-wk{
        border:1px solid #f37b22;
        color:#f37b22;
        margin-top:2.5px;
        height:42px;
        background:white;
        position:relative;
    }
    
     .minicart-wrapper:before,.minicart-wrapper:after{
        content:'';
        display:table;
    }

     #minicart_row{
        display:grid;
        grid-template-columns:70% 1fr;
        grid-template-rows:1fr;
        grid-column-gap:0px;
        grid-row-gap:0px;
    }
     #minicart_row #minicart_col_a{
        grid-area:1 / 1 / 2 / 2;
    }
     #minicart_row #minicart_col_b{
        grid-area:1 / 2 / 2 / 3;
    }
     #minicart_cart_text{
        font-family:"Montserrat";
        font-weight:600;
        font-size:13px;
        color:#ff7712!important;
        text-transform:uppercase;
    }
     #minicart_quote_circle{
        color:#ff7712!important;
    }
     #minicart_quote_count{
        transform:scale(0.75);
    }
     #minicart_quote_count_number{
        font-family:"Montserrat";
        font-weight:600;
        color:white !important;
        font-size:18px;
    }
}

/*! CSS Used from: https://use.fontawesome.com/releases/v5.14.0/css/all.css ;
 media=all */
 @media all{
     .fas{
        display:inline-block;
        font-style:normal;
        font-variant:normal;
        text-rendering:auto;
        line-height:1;
    }
     .fa-2x{
        font-size:2em;
    }
     .fa-stack{
        display:inline-block;
        height:2em;
        line-height:2em;
        position:relative;
        vertical-align:middle;
        width:2.5em;
    }
     .fa-stack-1x,.fa-stack-2x{
        left:0;
        position:absolute;
        text-align:center;
        width:100%;
    }
     .fa-stack-1x{
        line-height:inherit;
    }
     .fa-stack-2x{
        font-size:2em;
    }
     .fa-circle:before{
        content:"\f111";
    }
     .fas{
        font-family:"Font Awesome 5 Free";
    }
     .fas{
        font-weight:900;
    }
}
/*! CSS Used fontfaces */

 @font-face{
    font-family:'Montserrat';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3gTD_u50.woff2) format('woff2');
    unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
 @font-face{
    font-family:'Montserrat';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3g3D_u50.woff2) format('woff2');
    unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
 @font-face{
    font-family:'Montserrat';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3gbD_u50.woff2) format('woff2');
    unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
 @font-face{
    font-family:'Montserrat';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3gfD_u50.woff2) format('woff2');
    unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face{
    font-family:'Montserrat';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3gnD_g.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

 @font-face{
    font-family:"Font Awesome 5 Free";
    font-style:normal;
    font-weight:400;
    font-display:block;
    src:url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.eot);
    src:url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.eot#iefix) format("embedded-opentype"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.woff2) format("woff2"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.woff) format("woff"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.ttf) format("truetype"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.svg#fontawesome) format("svg");
}
 @font-face{
    font-family:"Font Awesome 5 Free";
    font-style:normal;
    font-weight:900;
    font-display:block;
    src:url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.eot);
    src:url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.eot#iefix) format("embedded-opentype"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.woff2) format("woff2"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.woff) format("woff"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.ttf) format("truetype"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.svg#fontawesome) format("svg");
}

<div id="header_cart" class="minicart-wrapper">
    <div id="mini-wk">
        <div id="minicart_row">

            <div id="minicart_col_a" class="action showcart icon">
                <span id="minicart_cart_text" class="centerVH uppercase"> Warenkorb</span>
            </div>

            <div id="minicart_col_b" data-bind="scope: 'minicart_content'">
                <span id="minicart_quote_count" class="fa-stack fa-2x">
                  <i id="minicart_quote_circle" class="fas fa-circle fa-stack-2x"></i>
                  <i id="minicart_quote_count_number" class="fas fa-stack-1x" data-bind="html: getCartParam('summary_count')">0</i>
                </span>
            </div>
        </div>
    </div>
</div>

我不知道如何让它在 Edge 中工作。有解决方法吗？

预期：

边缘：

jsfiddle

我正在使用 Microsoft Edge 44.18362.449.0 和 Microsoft EdgeHTML 18.18363。

Answer 1

很高兴地通知您，它在最新版本的 Edge 上运行良好。也许你只有一个旧版本？或者，也许您只需要清除缓存，按此组合可快速清除缓存 ctrl + shift + delete.

Answer 2

您的代码似乎在边缘运行。如果出于某种原因它对你不起作用，你为什么不使用：

position: absolute; /*Or you can use fixed*/
top: 50%;
left: 35%;
transform: translate(-50%, -50%);

在 js fiddle 中。 https://jsfiddle.net/hgw6uv8k/1/ 我在很多设备上都试过了。它对所有这些都一样。

边缘 - 不能水平和垂直居中文本

Edge - Cant center text horizontally and vertically

html

css

microsoft-edge