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

最简单的方法是使用

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

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

Answer 3

这是我的解决方案： 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%);
}

中心形式垂直内容

3 个答案: