如图所示，容器是一个灰色的正方形。容器内的元素是一个黑边框的正方形，在容器内部居中显示。
1、当元素不大于容器时可以居中；
2、当元素超出容器时，IE11里面没法居中了（谷歌浏览器照样可以居中对齐）。
请问该如何设置样式才能让IE里的元素超出容器时也能居中？相关代码如下，欢迎热情的朋友复制粘贴并修改，如果IE11里面可以解决这个问题，欢迎跟帖回复，谢谢！
（经过多次尝试，发现添加 -ms- 前缀的写法没有效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.outer {
background: #efefef;
height: 80px;
width: 80px;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
border: 1px black solid;
flex-shrink:0;
}
@keyframes change
{
0% {width: 20px; height: 20px;}
50% {width: 150px; height: 150px;}
100% {width: 20px; height: 20px;}
}
.inner
{
animation-name: change;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</style>
</head>
<body style='padding: 100px'>
<div class='outer'>
<div class='inner'>
1
</div>
</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
