Центрирование элементов div по клику

Question

У меня есть некоторые элементы div, которые, когда я нажимаю на них, показывают свою спину (флипкарды) и расширяются до размера 600 пикселей на 600 пикселей, я хочу, чтобы эти divs также шли в центре экрана когда я нажимаю на него, а затем снова возвращаюсь, когда снова нажимаю на него. Я бы хотел, чтобы он был центрирован по горизонтали и вертикали. Я пробовал искать, и до сих пор никто из них не работал. Большинство результатов включали что-то, такие как:

.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'); 
     }); 

Edit: Я просматривал некоторые из моих собственных вопросов, и с ссылкой на мой пример был изменен, я решил показать полный код страницы здесь вместе с результатом:

$('.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

Я корректировщик две проблемы

1. Ваш DIV с классом flip имеет position:relative поэтому крышка абсолютна к этому и не shelf.

2. Ваши левые и крайние поля не рассчитаны правильно. Вам нужно рассчитать их в соответствии с экрана и модальный размер

This способ центрирования DIV с помощью JQuery

Это работает правильно, зависит в большой степени на 1. выше

Answer 3

Я не эксперт, но попробуйте с 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 4

Попробуйте добавить это к телу

body { 
    height:100%; 
} 

и это к flipped класса (изменить то, что необходимо):

position:absolute; 
top:50%; 
left:50%; 
margin-top:-300px; 
margin-left:-300px; 

Вы можете анимировать движение с помощью javascript/jQuery, но я предполагаю, что вы знаете, как это сделать. Прокомментируйте, пожалуйста, если вы понятия не имеете,

EDIT: Here is a jsFiddle showing it works

На стороне записки вы, вероятно, следует использовать поля для расстояния между каждой книги (он же margin-right:50px; и т.д.), а не другой элемент

Edit 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, чтобы применить то, что я ВГА e дал вам правильно, here is a fully working jsfiddle. Вы, , должны быть в состоянии отключить имена классов/строк, которые у меня есть для прокомментированных строк, и это работает, хотя без прямого манипулирования вашим кодом может быть пара небольших ошибок, которые вы должны должны уметь исправлять себя

Что касается анимации перехода, я аппроксимировал результат in this jsFiddle простым перемещением некоторых из .css на .animate. Вы можете поиграть с ним, чтобы заставить его функционировать немного лучше.

Если вы не уверены в том, что-либо, что я добавил, или у вас есть ошибка, которую вы не можете решить после некоторого времени работы над ней, включая поиск аналогичные проблемы, комментарий, и я постараюсь помочь вам в дальнейшем