IE 11 居中对齐答案

【问题标题】：IE 11 align centerIE 11 居中对齐
【发布时间】：2020-08-02 20:21:12
【问题描述】：

问题：与父对齐中心的绝对位置在 IE 中不起作用，但在 Chrome/Safari 中起作用。

预期：与 IE 11 浏览器的行为应该相同。

IE 11 截图

.selectContainer {
  position: relative;
  display: flex;
  align-items: center; 
}
.selectContainer .select {
  border: 1px solid #8e99ab;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  background-color: #fff;
  height: 50px;
  padding: 12px 42px 12px 12px;
}
.selectContainer i {
  color: #707070;
  background: red;
  position: absolute;
  right: 0px;
  padding: 0 16px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="selectContainer">
    <select name="" id="" class="select"></select>
    <i class="fa fa-sort"></i>
</div>

【问题讨论】：

注意：<link> 标签不使用也不需要结束斜线，并且在 HTML 中从来没有。

标签： html css internet-explorer cross-browser internet-explorer-11

【解决方案1】：

.selectContainer i可以用top:50%;transform:translateY(-50%);我测试过了。

.selectContainer i {
    color: #707070;
    background: red;
    position: absolute;
    right: 0px;
    padding: 0 16px;
    top: 50%;
    transform: translateY(-50%);
}

【讨论】：

【解决方案2】：

您可以将 CSS bottom: 16px; 属性添加到 .selectContainer i，如下所示：

        .selectContainer i {
            color: #707070;
            background: red;
            position: absolute;
            right: 0px;
            bottom: 16px;
            padding: 0 16px;
        }

IE11 浏览器中的sample 输出：

【讨论】：