垂直居中表单内容

Question

我有the following landing page form（我已经删除了所有我认为无关紧要的不必要的东西，只留下了最少的样式）。这是代码（我使用的是 Bootstrap 3.3.5）：

<div class="col-md-6 app-door">
  <form class="image-hover text-center">
    <h3>Application name</h3>
    <div class="landing-page-form-group">
      <label class="landing-page-label">Label: </label>
      <input class="form-control landing-page-input">
    </div>
    <button class="btn">Submit</button>
  </form>
  <div class="center-block app-link some-img"/>
</div>

..和css

.image-hover {
  width: 300px;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.7) !important;
  position: absolute;
  z-index: 100;
  color: #cccccc;
  margin: 0 auto;
  left: 0;
  right: 0;
  border-radius: 25px;
}

.landing-page-form-group {
  padding-top: 16px;
  padding-bottom: 16px;
}

.landing-page-label {
  width: 100px;
  vertical-align: middle;
}

.landing-page-input {
  width: 150px;
  display: inline-block;
}

.app-link {
  width: 300px;
  height: 300px;
  background-size: 100% 100%;
  border-radius: 25px;
}

.some-img {
  background-image: url("http://dl.hiapphere.com/data/icon/201511/HiAppHere_com_com.ludicside.mrsquare.png");
}

我想将所有表单输入等垂直居中。我已经尝试过诸如使用位置（相对于父级，绝对在子级）、垂直对齐、顶部、也许我现在不记得的其他东西，因为我花了很多时间尝试。

我不是前端开发（我的意思是 html/css）方面的出色专家，所以我会非常高兴看到理解，尽管问题似乎足够基本。

感谢您的任何想法！

Answer 1

更新 检查没有flex demo的解决方案here

试试这个

查看演示here

将以下样式添加到您现有的 .image-hover 类中

CSS：

.image-hover {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

Answer 2

这是我的解决方案： https://jsfiddle.net/0x9epxah/1/

添加 div .inner-form:

<div class="col-md-6 app-door">
  <form class="image-hover text-center">
    <div class="inner-form">
      <h3>Application name</h3>
      <div class="landing-page-form-group">
        <label class="landing-page-label">Label: </label>
        <input class="form-control landing-page-input">
      </div>
      <button class="btn">Submit</button>
    </div>
  </form>
  <div class="center-block app-link some-img"/>
</div>

还有这个 css 类：

.inner-form {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

Answer 3

最简单的方法是使用

.image-hover {
    display: flex;
    align-items : center;
    justify-content: center;
}

align-items 负责垂直居中，justify-contents 负责水平居中。