将子div设置为父div的中心

Question

我有一个2 * 2矩阵，其中子div应该放大，剩下的div应该被隐藏。

我做了这个animation，其中每件事情都很好，除了div应该从它的位置来看，但是我的实现似乎每件事都来自左上角。

示例： 当用户点击div二时，它应该看起来应该来自右上角，但现在它来自左上角。

任何使这项工作的建议

FIDDLE

Answer 1

使用绝对定位。您既可以预先声明CSS，也可以使用JS注入它。

.one, .two, .three, .four {
    position: absolute;
}
.two, .four {
    right: 0 !important;
}
.one, .two {
    top: 0;
}
.three, .four {
    top: 100px;
}
.big {
    top: 10% !important;
}

See Updated Fiddle