Allign divs to middle of screen by their middle - html

Question

Using bootstrap, I need to have a page with divs (4 initially) as buttons in the middle of the screen, as below image:
I succeeded to do this, but, next, I need to enlarge one of them when mouseover as below image:
so, they are aligned by their middle. and all others will be smaller when another on is hover.

Answer 1

Simply increase the width and height on :hover.
html, body,
.container {
height: 100%;
}
.container {
display: table;
vertical-align: middle;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
.buttons-container {
vertical-align: bottom;
text-align: center;
}
.app-button:hover {
width: 75px;
height: 75px;
}
.app-button {
width: 50px;
height: 50px;
margin: 15px;
background-color: #cccccc;
display: inline-block;
vertical-align: middle;
transition: all 0.5s;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row vertical-center-row">
<div class="col-md-12 buttons-container">
<div class="app-button"></div>
<div class="app-button"></div>
<div class="app-button"></div>
<div class="app-button"></div>
</div>
</div>
</div>

Answer 2

You can try two methods one is to increase the height and width and the other is to use transform
With transform Fiddle
html, body, .container {
height: 100%;
}
.container {
display: table;
vertical-align: middle;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
.buttons-container {
vertical-align: bottom;
text-align: center;
}
.app-button {
width: 50px;
height: 50px;
margin: 15px;
background-color: #cccccc;
display: inline-block;
}
.app-button:hover {
transform:scale(1.5,1.5);
margin: 15px;
background-color: #cccccc;
display: inline-block;
}
<div class="container">
<div class="row vertical-center-row">
<div class="col-md-12 buttons-container"> <a href="#">
<div class="app-button"></div>
</a>
<a href="#">
<div class="app-button"></div>
</a>
<a href="#">
<div class="app-button">
</div>
</a>
<a href="#">
<div class="app-button">
</div>
</a>
</div>
</div>
</div>
By changing height and width Fiddle
html, body, .container {
height: 100%;
}
.container {
display: table;
vertical-align: middle;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
.app-button:hover {
height:100px;
width:100px;
}
.buttons-container {
vertical-align: bottom;
text-align: center;
}
.app-button {
width: 50px;
height: 50px;
margin: 15px;
background-color: #cccccc;
display: inline-block;
vertical-align:middle;
}
<div class="container">
<div class="row vertical-center-row">
<div class="col-md-12 buttons-container"> <a href="#">
<div class="app-button"></div>
</a>
<a href="#">
<div class="app-button"></div>
</a>
<a href="#">
<div class="app-button">
</div>
</a>
<a href="#">
<div class="app-button">
</div>
</a>
</div>
</div>
</div>