IE 11 flex align-Items: center with an absolute positioned div aligns the top of the div not the middle
IE 11 flex align-Items: center with an absolute positioned div aligns the top of the div not the middle
父div是相对位置并显示flex,align-items:center,绝对定位的子组件没有按预期居中,而是该组件的顶部居中
有谁知道如何解决这个问题?
https://codepen.io/anon/pen/aYXJZe
.crumb {
width: 100%;
margin-top: 100px;
height: 100px;
background-color: grey;
}
.arrowWrapper {
height: 100px;
width: 100px;
background-color: red;
display: flex;
align-items: center;
position: relative;
}
.arrow {
height: 150px;
width: 80px;
background-color: blue;
position: absolute;
}
<div class="crumb">
<div class="arrowWrapper">
<span class="arrow"></span>
</div>
</div>
在下面添加 css 并勾选
.arrow {
height: 150px;
width: 80px;
background-color: blue;
position: absolute;
top:-25px;
}
添加 CSS
.arrowWrapper {margin: 0 auto;}
和 .arrow {left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); top: 50%}
.crumb {
width: 100%;
height: 100px;
background-color: grey;
}
.arrowWrapper {
height: 100px;
width: 100px;
background-color: red;
display: flex;
align-items: center;
position: relative;
justify-content: center;
margin: 0 auto;
}
.arrow {
height: 60px;
width: 80px;
background-color: blue;
position: absolute;
right: 0;
left: 0;
top: 50%;
bottom: 0;
margin: 0 auto;
transform: translateY(-50%);
}
<div class="crumb">
<div class="arrowWrapper">
<span class="arrow"></span>
</div>
</div>
父div是相对位置并显示flex,align-items:center,绝对定位的子组件没有按预期居中,而是该组件的顶部居中
有谁知道如何解决这个问题?
https://codepen.io/anon/pen/aYXJZe
.crumb {
width: 100%;
margin-top: 100px;
height: 100px;
background-color: grey;
}
.arrowWrapper {
height: 100px;
width: 100px;
background-color: red;
display: flex;
align-items: center;
position: relative;
}
.arrow {
height: 150px;
width: 80px;
background-color: blue;
position: absolute;
}
<div class="crumb">
<div class="arrowWrapper">
<span class="arrow"></span>
</div>
</div>
在下面添加 css 并勾选
.arrow {
height: 150px;
width: 80px;
background-color: blue;
position: absolute;
top:-25px;
}
添加 CSS
.arrowWrapper {margin: 0 auto;}
和 .arrow {left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); top: 50%}
.crumb {
width: 100%;
height: 100px;
background-color: grey;
}
.arrowWrapper {
height: 100px;
width: 100px;
background-color: red;
display: flex;
align-items: center;
position: relative;
justify-content: center;
margin: 0 auto;
}
.arrow {
height: 60px;
width: 80px;
background-color: blue;
position: absolute;
right: 0;
left: 0;
top: 50%;
bottom: 0;
margin: 0 auto;
transform: translateY(-50%);
}
<div class="crumb">
<div class="arrowWrapper">
<span class="arrow"></span>
</div>
</div>