Centering div elements on click

Question

I have some div elements which when I click on them, they show their back (flipcards) and expand to a size of 600px by 600px, I want those divs to also go in the center of the screen when I click on it, then move back again when a click on it again. I would like it to be centered horizontally and vertically. I have tried searching, and so far none of them worked. Most results included something such as:

.flip.cover.flipped{
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;
    position: absolute;
    height: 600px;
    width: 600px;
    top: 50%;
}

I've added that to the current css class.flip.cover.flipped which is a class which is toggled on click using javascript, but that only resulted in my div elements to remain where it was on click. See this. Here is the .flip.cover.flipped class in full:

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

Other results included a custom javascript function, which I couldn't test out. If a custom javascript function works, I just need something to toggle it with (If that's the case, I'm really hoping for something simple such as $(this).find('.cover').toggleClass('flipped');, only for functions)

I'd really appreciate anyone's help as to how I'd be able to do this.

I've recently discovered that the usual way centres the element within its parent element. Problem is that I want to centre the element within the window not within its parent element.
Here is the HTML structure:

<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>

and this is the javascript to toggle the class:

        $('.flip').click(function() {
            $(this).find('.cover').toggleClass('flipped');
        });

Edit: I was reviewing some of my own questions, and since the link to my example has been changed, I decided on showing the full code of the page here along with the result:

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

that css should work fine, however it will center based on the first parent that has position absolute or relative. If you just want to center in the middle of the viewport, you could use `position: fixed` — Pevara, Jul 08 '13 at 13:29
it's parent, `.cover` was `relative`, I changed it to `fixed` yet it still didn't worked (it stayed the same). — Mark Said Camilleri, Jul 08 '13 at 13:45
oh, sorry, I changed it.. it is http://jnwtson.tumblr.com/themetest — Mark Said Camilleri, Jul 12 '13 at 17:58

score 2 · Accepted Answer · answered Aug 06 '13 at 02:48

2

Your flip animation is likely to need a lot of work, but I think I've got the centering issue worked out.

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

answered Aug 06 '13 at 02:48

apaul

16,092
8
47
82

thanks. Is there any way to make the movement a bit more fluid? – Mark Said Camilleri Aug 07 '13 at 22:46
@markscamilleri you'll have to play with the css. I think if you smooth out the flip the rest will look ok. – apaul Aug 07 '13 at 23:56
smooth out the flip, in what sense? – Mark Said Camilleri Aug 08 '13 at 22:32
1

@markscamilleri http://jsfiddle.net/apaul34208/f84Js/24/embedded/result/ I played with it a little more and slowed it down so you could see what's happening. I think I've worked out most of the issues except the initial jump to position absolute... Not sure what to do with that – apaul Aug 09 '13 at 14:45

score 1 · Answer 2 · edited Aug 05 '13 at 23:20

1

I'm not an expert but try with Jquery :)

Create a .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"); 
     });
});

edited Aug 05 '13 at 23:20

Roko C. Buljan

196,159
39
305
313

answered Jul 08 '13 at 12:24

Kardos Rudolf

35
1
11

Just like I said, the css isn't working properly, look at the link in the question to see the results with that css. – Mark Said Camilleri Jul 08 '13 at 12:27
With this the div centres by placing the top-left corner in the centre of the original div box like [here](http://jnwtson.tumblr.com/themetest2) – Mark Said Camilleri Jul 24 '13 at 13:51
I've recently discovered that the usual way centres the element within its parent element. – Mark Said Camilleri Aug 04 '13 at 21:58

score 0 · Answer 3 · edited May 23 '17 at 10:30

0

I spotter two problems

Your div with class flip has a position:relative so the cover is absolute to this and not the shelf.
Your margin-left and margin-top are not calculated correctly. You need to calculate these according to screen and modal size

This is a way to center a div using jquery

This working correctly depends heavily on 1. above

edited May 23 '17 at 10:30

Community

1
1

answered Jul 08 '13 at 12:15

Alexandros B

1,881
1
23
36

1. If I change that, the cards would go into each other, not so nice. 2. How should I calculate them please? – Mark Said Camilleri Jul 08 '13 at 12:31
regarding 1 don't you open only one cover at a time? – Alexandros B Jul 08 '13 at 12:44
Actually, I don't know how to do that but I still haven't searched for that, one step at a time. – Mark Said Camilleri Jul 08 '13 at 12:59
oh, I now see what you meant, sorry.... If I change the `position` to `relative`, the cards **before I flip them** would go into each other. – Mark Said Camilleri Jul 08 '13 at 13:46
how do I toggle it on click? – Mark Said Camilleri Jul 30 '13 at 15:10
probably using `toggleClass` in jquery – Alexandros B Jul 31 '13 at 10:06
I don't think it will work as the result in the link you posted is using javascript... – Mark Said Camilleri Aug 01 '13 at 13:22
I've recently discovered that the usual way centres the element within its parent element. Any help? – Mark Said Camilleri Aug 04 '13 at 21:58

Zach Saucier · Answer 4 · 2013-08-05T21:34:38.000

0

Try adding this to the body

body {
  height:100%;
}

and this to the flipped class (changing what is necessary):

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

You can animate the motion using javascript/jQuery, but I assume you know how to do that. Please comment if you have no clue

EDIT: Here is a jsFiddle showing it works

On a side note you should probably use margins for the spacing in between each book (aka margin-right:50px;, etc.), not another element

Edit 2: Since you're using jQuery already, you can change your jQuery on click function to this:

$('.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 to prove it works too. However with this method you have would have to do the same type of calculation on window resize if you want it to stay perfectly centered as in

$(window).resize(function() {
    var midHeight = window.innerHeight/2;
    var midWidth = window.innerWidth/2;
    $(this).find('.cover').toggleClass('flipped').css({
        "top":midHeight,
        "left":midWidth
    });
});

But this takes more to process

Keep in mind you need to change the position back to the original value on the next click

Edit three:

Since it seems you don't have enough basic jQuery knowledge to apply what I have given you correctly, here is a fully working jsfiddle. You should be able to switch out the class names/lines I have for the commented out lines and it work, though without directly manipulating your code there could be a couple small errors that you should be able to fix yourself

As for animating the transition, I approximated the result in this jsFiddle by simply moving some of the .css to .animates. You can play around with it to get it functioning a little better

If you're unsure of what anything that I added does, or you have some error you can't resolve after some time of working on it including looking up similar problems, comment and I will try to assist you further

edited Aug 05 '13 at 21:34

answered Aug 04 '13 at 23:14

Zach Saucier

24,871
12
85
147

I don't know how to animate that... I'm still starting html, css and javascript... above all, it didn't work. The result is: http://jnwtson.tumblr.com/themetest3 – Mark Said Camilleri Aug 04 '13 at 23:21
Oh, and thanks about the margin to space the book, will do. (Sry, but the link posted doesn't have that yet.) Also, the result is like that as it is centring within the parent element. I want to centre it within the window. – Mark Said Camilleri Aug 04 '13 at 23:26
I know that it works, just that it centres the element relative to the parent element not to the page. I need it to be in the centre of the page not of its parent element. See the HTML structure above – Mark Said Camilleri Aug 05 '13 at 00:10
From what I can tell, the div layer `flip` is useless, simply apply the click event to the div layer `cover`. Or you can do what my second edit suggests – Zach Saucier Aug 05 '13 at 00:33
Actually, if I place the click event on the div layer `cover`, it won't work. Also, how to I revert it back to its original position? – Mark Said Camilleri Aug 05 '13 at 16:44
Thanks. Yes I know I need to learn :) , I'm a very basic beginner. – Mark Said Camilleri Aug 05 '13 at 20:54
Thanks, but even while meddling, it either just has the second one move to the centre and the first one off centre, or turns and goes to the centre without animation. Here are the two versions: – Mark Said Camilleri Aug 06 '13 at 00:01
Then it is an implementation issue on your part, I'm sorry I can't help you any more with the information I have – Zach Saucier Aug 06 '13 at 00:06
The one that moves only: http://pastebin.com/1tws6WNK - http://jnwtson.tumblr.com/themetest4 The one that has no animation: http://pastebin.com/RzHzD8PJ - http://jnwtson.tumblr.com/themetest5 – Mark Said Camilleri Aug 06 '13 at 00:10
The thing is that because your code is poorly constructed in the fist place (with unnecessary CSS, unnecessary elements, etc.) and because you don't fully understand the languages you're using you will continue to run into problems all along the way. I would recommend learning the languages better to start, then restructuring the program, only using snippets from this version to help for little things – Zach Saucier Aug 06 '13 at 00:23

Centering div elements on click

4 Answers4