How to move a DIV to the center when clicked, using CSS and/or Angular?

Question

I'm trying to create a CSS animation to move the clicked button (actually, the whole DIV that it's contained in) to the center. Each button is in a Div and I'm having trouble figuring out how, using one css class, to get any of the buttons to move to the center.

I've tried a variety of ways in the css, but haven't been able to do it where the other buttons don't move.

A codepen is here.

If you run the code and click the "DIV0" button, it moves to the center. (Click the button again to reset.) When you click any of the other buttons, I want them to go to the same spot as where the "DIV0" button went.

Update: I need to set up the DIVs/Buttons programmatically (passing the "divs" array to the HTML so that ng-repeat builds the layout). The size of the "divs" array may vary, so doing this method automates the building of the layout. Also, the div needs to take up 50% of the width and height so that it arrays out a 2-divs-across matrix on the screen. And each div will be fully filled with an image and text. I'm trying to move the full contents of the div to the center, not just the button.

so my layout may look like:

DIV0 DIV1
DIV2 DIV3

or just:

DIV0 DIV1
DIV2

Here is another codepen. http://codepen.io/furnaceX/pen/BKjyEp/ This one gets all the buttons to the right location, but the centering won't animate. Any ideas?

angular.module('myApp', [])
  .controller("ctrl", ['$scope', function($scope) {
    $scope.divs = [{id: 0, center: false}, {id: 1, center: false}, 
                   {id: 2, center: false}, {id: 3, center: false}];
    $scope.fade = false;

    $scope.go = function(div) {
      if (!$scope.fade) {
        div.center = true;
        console.log("click again to reset");
        $scope.fade = true;
      } else {
        div.center = false;
        $scope.fade = false;
      }
     
    }
  }])

html, body {
    height: 100%;
    width: 100%;
}

.block {
  text-align: center;
  width: 50%;
  height: 50%;
  float: left;
}

.center {
    transition:0.5s linear all;
    transform: translate(50%,50%);
    top: 50%;
    left: 50%;
    //position: relative;
}

.fadeout {
    transition:0.5s linear all;
    opacity: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div class="container" ng-controller="ctrl">
    <div ng-repeat="div in divs" class="block">

      <div ng-class="{center: div.center, fadeout: fade*!div.center}">
        <button ng-click="go(div)">DIV{{ div.id }}</button>
      </div>
    </div>
  </div>
</div>

Answer 1

Pure CSS solution using checkbox (seems to be a button, but that's a checkbox undercover):

updated with 4 buttons

body {
  width: 100%;
  height: 100vh;
  margin: 0px;
  background: honeydew;
}

label > input { 
  display: none; 
}

#button0 {  
  position: absolute;
  line-height: 45px;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  height: 50px;
  width: 50px;  
  border: 2px dashed black;
  box-sizing: border-box;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0.5;
}

label > input ~ .button { 
  cursor: pointer;
  position: absolute;
  line-height: 45px;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  height: 50px;
  width: 50px;  
  border: 2px solid crimson;
  box-sizing: border-box;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
}

label > input ~ #button1 { 
  left: 0;
  top: 0;
  background: gold;
}

label > input ~ #button2 { 
  left: calc(100% - 50px);
  top: calc(100% - 50px);
  background: yellowgreen;
}

label > input ~ #button3 { 
  left: calc(100% - 50px);
  top: 0;
  background: skyblue;
}

label > input ~ #button4 { 
  left: 0;
  top: calc(100% - 50px);
  background: tomato;
}

label > input:checked ~ #button1, label > input:checked ~ #button2, label > input:checked ~ #button3, label > input:checked ~ #button4 { 
  left: calc(50% - 25px);
  top: calc(50% - 25px);
  border: 2px solid black;
  -webkit-transition: all 3s ease-in-out;
  transition: all 3s ease-in-out;
}

<div id=button0 class=button>target</div>

<label>
<input type="checkbox" name="run" value="click" />
<div id=button1 class=button>click</div>
</label>

<label>
<input type="checkbox" name="run" value="click" />
<div id=button2 class=button>click</div>
</label>

<label>
<input type="checkbox" name="run" value="click" />
<div id=button3 class=button>click</div>
</label>

<label>
<input type="checkbox" name="run" value="click" />
<div id=button4 class=button>click</div>
</label>

Answer 2

Add z-index to center class because your other divs are covering your center button. When you click again you don't click the center button you click the sibling div.