IE 11 居中对齐

Question

问题：父对齐中心的绝对位置在 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>

Answer 1

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

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

Answer 2

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

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

在IE11浏览器中的sample输出：

IE 11 居中对齐

IE 11 align center

html

css

internet-explorer

cross-browser

internet-explorer-11