IE 11 flex align-Items: center with an absolute positioned div aligns the top of the div not the middle

Question

With parent div that is position relative and display flex, align-items: center, the child component which is positioned absolutely is not centered as expected but instead the top of that component is centered

Does anyone know how to get around this quirk?

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>

You can open the code pen in chrome to see the desired effect — Michael Norrie, Apr 10 '18 at 06:06

zubair khanzada · Accepted Answer · 2018-04-10T06:16:37.020

3

Add CSS .arrowWrapper {margin: 0 auto;} and .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>

edited Apr 10 '18 at 06:16

answered Apr 10 '18 at 06:00

zubair khanzada

903
2
9
15

This centers it horizontally but not vertically, if you open the code pen in chrome you will see the desired effect – Michael Norrie Apr 10 '18 at 06:05
i have edit my answer @MichaelNorrie – zubair khanzada Apr 10 '18 at 06:17

score 0 · Answer 2 · answered Apr 10 '18 at 05:45

0

add below css and check

  .arrow {
  height: 150px;
  width: 80px;
  background-color: blue;
  position: absolute;
top:-25px;
}

answered Apr 10 '18 at 05:45

PPL

6,357
1
11
30

That will work for this specific example, but the actual technical problem has multiple divs of multiple heights so I was hoping for a more general solution > – Michael Norrie Apr 10 '18 at 06:06

IE 11 flex align-Items: center with an absolute positioned div aligns the top of the div not the middle

2 Answers2