让我明白这一点。我有absolute定位flex container来创建网格布局。在.tileWrapper本身设置动画后，我在{$ 1}}中定位relative以填充空间（并保持布局）。
当我点击图块（absolute定位）时，它会在Y轴上翻转并改变大小。
我希望.tile在屏幕翻转时居中。在我再次点击它之后，中心将取消。我甚至不知道它是否可行。如果不是让我知道。
HTML MARKUP：
.tileCSS：
<body>
<div class="flexContainer">
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.<br>
Matematyka
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper small">
<div class="tile matematyka">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
<div class="tileWrapper big">
<div class="tile technologie">
<div class="tileContent front">
Tytuł artykułu.
</div>
<div class="tileContent back">
Treść artykułu.
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
在我看来，你正在寻找弹出窗口位于页面中间的中心。如果是这样，那么您需要在CSS中添加和删除。
.flipped{
width: 500px;
height: 300px;
opacity: 0.9;
z-index: 10;
border: 5px solid rgba(255, 255, 255, 0.4);
-webkit-transform: perspective(700) rotateY(-180deg);
transform: perspective(700) rotateY(-180deg);
-webkit-transition: 0.5s;
transition: 0.5s;
position: fixed;
left: 50%;
margin-left: -250px;
top: 50%;
margin-top: -150px;
}
左边50％然后是负边距仅因为你在div上的设置尺寸而起作用，同样适用于上边距。它现在以窗口为中心。