我有一些div元素，当我点击它们时，它们显示它们的背面（翻转卡）并扩展到600px×600px的大小，我希望当我点击它时这些div也会进入屏幕的中心，然后再次点击它再次向后移动。我希望它水平和垂直居中。我试过搜索，到目前为止没有一个工作。大多数结果包括如下内容：
.flip.cover.flipped{
left: 50%;
margin-top: -300px;
margin-left: -300px;
position: absolute;
height: 600px;
width: 600px;
top: 50%;
}
我已经将它添加到当前的css类.flip.cover.flipped，这是一个使用javascript在点击时切换的类，但这只会导致我的div元素保持在点击的位置。看到这个。这是完整的.flip.cover.flipped课程：
.flip .cover.flipped {
left: 50%;
margin-top: -300px;
margin-left: -300px;
position: absolute;
height: 600px;
width: 600px;
top: 50%;
transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-ms-transform: rotatey(180deg);
-o-transform: rotatey(-180deg);
-webkit-transform: rotatey(-180deg);
z-index: 10;
}
其他结果包括自定义的javascript函数，我无法测试。如果自定义javascript函数有效，我只需要用它来切换它（如果是这种情况，我真的希望有一些简单的东西，比如$(this).find('.cover').toggleClass('flipped');，仅用于函数）
我非常感谢任何人帮助我如何做到这一点。
我最近发现通常的方法是将元素置于其父元素中。问题是我想将窗口中的元素居中，而不是在其父元素中 这是HTML结构：
<div class="flip">
<div class="cover">
<div class="face front">
<img src="http://farm4.staticflickr.com/3809/8814925510_b53d082ea6_o.jpg" width="125"/>
</div>
<div class="face back">
Hello World!
</div>
</div>
</div>
这是切换课程的javascript：
$('.flip').click(function() {
$(this).find('.cover').toggleClass('flipped');
});
编辑：我正在审核自己的一些问题，由于我的示例链接已更改，因此我决定在此显示该页面的完整代码以及结果：
$('.flip').click(function() {
$(this).find('.cover').toggleClass('flipped');
}); /*Sorted alphabetically*/
* {
margin: 0px;
padding: 0px;
}
#backbutton {
background-image: url("http://farm9.staticflickr.com/8538/8781018857_feef1c4e6e_o.png");
background-position: center;
background-repeat: no-repeat;
background-size: 90px 32px;
color: #FFFFFA;
display: inline-block;
font-family: Helvetica, Sans-Serif;
font-size: 26px;
float: left;
min-width: 90px;
padding: 4px 0px;
text-align: center;
text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
z-index: 2;
}
body {
background-image: url('http://farm3.staticflickr.com/2891/8769949843_f6b2b03c89_o.png');
background-repeat: repeat-y;
background-position: 0px 37px;
background-size: cover;
}
#creditsbutton {
background-image: url("http://farm4.staticflickr.com/3726/8769949955_3d28f7be67_o.png");
background-position: center;
background-repeat: no-repeat;
background-size: 100px 32px;
color: #FFFFFA;
display: inline-block;
font-family: Helvetica, Sans-Serif;
font-size: 26px;
float: right;
min-width: 100px;
padding: 4px 0px;
text-align: center;
text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
z-index: 2;
}
.flip {
box-shadow: 0px 15px 6px -6px #2C0600;
-o-box-shadow: 0px 15px 6px -6px #2C0600;
-ms-box-shadow: 0px 15px 6px -6px #2C0600;
-moz-box-shadow: 0px 15px 6px -6px #2C0600;
-webkit-box-shadow: 0px 15px 6px -6px #2C0600;
display: inline-block;
height: 185px;
position: relative;
width: 125px;
perspective: 800;
-o-perspective: 800;
-moz-perspective: 800;
-ms-perspective: 800;
-webkit-perspective: 800;
}
.flip .cover {
height: 100%;
padding: 0px 0px 0px 0px;
position: relative;
text-align: center;
width: 100%;
transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: 0.5s;
-o-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-webkit-transition: 0.5s;
}
.flip .cover .back {
background: white;
color: black;
cursor: pointer;
transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-ms-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
-webkit-transform: rotatey(-180deg);
}
.flip .cover.flipped {
left: 50%;
margin-top: -300px;
margin-left: -300px;
position: absolute;
height: 600px;
width: 600px;
top: 50%;
transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-ms-transform: rotatey(180deg);
-o-transform: rotatey(-180deg);
-webkit-transform: rotatey(-180deg);
z-index: 10;
}
.flip .cover .face {
font-family: Helvetica, Sans Serif;
height: 100%;
line-height: 200px;
position: absolute;
text-align: center;
width: 100%;
backface-visibility: hidden;
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backfae-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.flip .cover .front {
background: black;
color: white;
cursor: pointer;
position: absolute;
}
#header {
background-image: url("http://farm9.staticflickr.com/8137/8774763204_453c37e1aa_o.png");
background-repeat: no-repeat;
background-size: cover;
min-width: 673px;
padding: 4px 14px;
z-index: 1;
}
.headerbuttonsegment-centre {
background-image: url("http://farm6.staticflickr.com/5330/8787597480_6696f22a79_o.png");
background-position: center;
background-repeat: no-repeat;
color: #FFFFFA;
display: inline-block;
font-family: Helvetica, Sans-Serif;
font-size: 26px;
padding: 4px 0px;
text-align: center;
text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
z-index: 2;
}
#headerbuttonsegment-left {
background-image: url("http://farm9.staticflickr.com/8560/8787597614_733a58b275_o.png");
background-position: center;
background-repeat: no-repeat;
color: #FFFFFA;
display: inline-block;
font-family: Helvetica, Sans-Serif;
font-size: 26px;
padding: 4px 0px;
text-align: center;
text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
z-index: 2;
}
#headerbuttonsegment-right {
background-image: url("http://farm6.staticflickr.com/5466/8787597568_43fd6869fb_o.png");
background-position: center;
background-repeat: no-repeat;
color: #FFFFFA;
display: inline-block;
font-family: Helvetica, Sans-Serif;
font-size: 26px;
padding: 4px 0px;
text-align: center;
text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
z-index: 2;
}
#shelf {
list-style-type: none;
padding: 10px 50px 20px;
position: relative;
}
.spacing {
display: inline-block;
width: 50px;
}
.wrap-centre {
min-width: 603px;
text-align: center;
width: 100%
}<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<body>
<div id='header'>
<a href="http://markscamilleri.tumblr.com">
<div id="backbutton">
Back
</div>
</a>
<div class='wrap-centre'>
<div id="headerbuttonsegment-left" style=" min-width: 150px; background-size: 150px 32px;">
Bookshelf
</div>
<div class="headerbuttonsegment-centre" style=" min-width: 175px; background-size: 175px 32px;">
Want to Read
</div>
<div id="headerbuttonsegment-right" style=" min-width: 150px; background-size: 150px 32px;">
Favourites
</div>
<a href="#" target="_blank">
<div id='creditsbutton'>
Credits
<!--Do not remove Credits!!-->
</div>
</a>
</div>
</div>
<div id="shelf">
<div class="flip">
<div class="cover">
<div class="face front">
<img src="http://farm3.staticflickr.com/2866/8804333739_9d644bcdf6_o.jpg" width="125" />
</div>
<div class="face back">
Hello World!
</div>
</div>
</div>
<div class="spacing">
</div>
<div class="flip">
<div class="cover">
<div class="face front">
<img src="http://farm4.staticflickr.com/3809/8814925510_b53d082ea6_o.jpg" width="125" />
</div>
<div class="face back">
Hello World!
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分：2)
您的翻转动画可能需要大量工作，但我认为我已经解决了这个中心问题。
<强> Working Example
$(function () {
$('.flip').click(function () {
$(this).find('.cover').toggleClass('flipped');
centered();
});
centered = function () {
var wy = window.innerHeight / 2,
wx = window.innerWidth / 2,
py = 300,
px = 300,
pageTop = wy - py,
pageLeft = wx - px;
if ($('.cover').hasClass('flipped')) {
$('.flipped').css({
position: "absolute",
top: pageTop,
left: pageLeft
});
} else {
$('.flip, .cover').removeAttr('style');
}
};
$(window).resize(centered);
});
答案 1 :(得分：1)
我不是专家，但尝试使用Jquery：）
创建.centermybox DIV。
<强>的CSS ：
.centermybox{
position:absolute;
left:50%;
top:50%;
z-index:99;
margin: -300px 0 0 -300px;
}
Jquery ：
$(document).ready function() {
$(".youdivhere").toggle( function() {
$(this).addClass(".centermybox");
});
});
答案 2 :(得分：0)
我发现了两个问题
您的班级flip的div有position:relative，所以封面是绝对的，而不是shelf。
您的margin-left和margin-top未正确计算。您需要根据屏幕和模态大小计算这些
This是一种使用jquery
来居中div的方法这种正常工作在很大程度上取决于1.上面
答案 3 :(得分：0)
尝试将此添加到正文
body {
height:100%;
}
这是flipped类（改变必要的）：
position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-300px;
您可以使用javascript / jQuery为动画设置动画，但我假设您知道如何操作。如果您没有线索，请发表评论
编辑：Here is a jsFiddle showing it works
在旁注中你应该使用每个书之间的间距（又名margin-right:50px;等），而不是另一个元素
编辑2 ：由于您已经使用了jQuery，因此您可以将点击功能上的jQuery更改为：
$('.flip').click(function() {
var midHeight = window.innerHeight/2;
var midWidth = window.innerWidth/2;
$(this).find('.cover').toggleClass('flipped').css({
"position":"absolute",
"top":midHeight,
"left":midWidth,
"margin-top":"-300px",
"margin-left":"-300px"
});
});
With the jsFiddle证明它也有效。但是，使用此方法，如果您希望它保持完全居中，则必须对窗口调整大小进行相同类型的计算，如
$(window).resize(function() {
var midHeight = window.innerHeight/2;
var midWidth = window.innerWidth/2;
$(this).find('.cover').toggleClass('flipped').css({
"top":midHeight,
"left":midWidth
});
});
但这需要更多的处理
请记住，您需要在下次点击时将位置更改回原始值
编辑三：
因为看起来你没有足够的基本jQuery知识来应用我给你的正确的here is a fully working jsfiddle。你 应该能够为注释掉的行换出我的类名/行并且它可以工作，虽然没有直接操作你的代码可能会有一些你应该<的小错误/ em>能够自己解决问题
至于设置过渡的动画，我只是将.css的一部分移动到.animate来近似结果in this jsFiddle。你可以玩它来使它运作得更好
如果你不确定我添加了什么，或者你有一些错误，经过一段时间的努力就无法解决，包括查找类似的问题，评论我会尽力协助你进一步