将div与中间对齐到屏幕中间

Question

使用bootstrap，我需要有一个div（最初为4）的页面作为屏幕中间的按钮，如下图所示：

我成功完成了这项工作，但接下来，我需要在鼠标悬停时放大其中一个，如下图所示：

所以，他们的中间是对齐的。当另一个人在盘旋时，所有其他人都会变小。

Answer 1

您可以尝试两种方法，一种是增加高度和宽度，另一种是使用变换

使用转化Fiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

通过更改高度和宽度Fiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需增加width上的height和: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">
      <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>