Question

我有一些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">
        &nbsp;&nbsp;Back
      </div>
    </a>
    <div class='wrap-centre'>
      <div id="headerbuttonsegment-left" style=" min-width: 150px; background-size: 150px 32px;">
        &nbsp;Bookshelf&nbsp;
      </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>

Answer 1

您的翻转动画可能需要大量工作，但我认为我已经解决了这个中心问题。

<强> 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);
});

Answer 2

我不是专家，但尝试使用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"); 
     });
});

Answer 3

我发现了两个问题

您的班级flip的div有position:relative，所以封面是绝对的，而不是shelf。
您的margin-left和margin-top未正确计算。您需要根据屏幕和模态大小计算这些

This是一种使用jquery

这种正常工作在很大程度上取决于1.上面

Answer 4

尝试将此添加到正文

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。你可以玩它来使它运作得更好

如果你不确定我添加了什么，或者你有一些错误，经过一段时间的努力就无法解决，包括查找类似的问题，评论我会尽力协助你进一步

点击时将div元素居中

4 个答案: