html - 将 div 对齐到屏幕中间

Question

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

我成功地做到了这一点，但是，接下来，我需要在鼠标悬停时放大其中一个，如下图所示：

因此，它们的中间对齐。当另一个悬停时，所有其他的都会变小。

Answer 1

只需增加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>

Answer 2

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

使用变换小提琴

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>

通过改变高度和宽度小提琴

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>