将表单居中在一个 div 区块内

Question

以下是给定的表单和CSS样式表：

index.html代码片段：

<div class="parent">
    <div class="child">
        <form>
            <input type="text"/>
            <br/>
            <input type="submit"/>
        </form>
    </div>
    <div class="helper"></div>
</div>

mycss.css 代码片段

.parent{
    width: 500px;
    height: 400px;
    text-align: center;
    border: 1px solid #dd0;
    background: #ffa;
}
.child {
    display:inline-block;
    vertical-align:middle;
}
.helper {
    display:inline-block;
    vertical-align:middle;
    height:100%;
    width:0px;
}

这里 是上面代码的结果。但这个结果对我来说不是很清晰。在这个示例中，div.helper 的作用是什么？

在 div.parent 样式类中，我们有 text-align: center;。为什么没有它只有水平居中？

为什么在 div.child 或 div.helper 中没有 vertical-align:middle;，只有水平居中？

- user2889159

Answer 1

这里使用 div.helper 在 display:inline-block 和 vertcal-align:middle 模式下，使另一个元素 垂直居中 到 .parent 中。

而且

text-align:center; 用于使输入元素居中于 .parent

如上所述，

vertcal-align:middle 被用来使这些元素垂直居中到 .parent 中。

但是有其他更好、更简单和更清晰的方法来实现这一点

你可以采用以下简单方法：

只需按照以下方式更改CSS：

将 diplay:table-cell; 应用于 .parent div，以便它具有将其子元素垂直居中的能力。

然后将相同的 vertical-align:middle 应用于子元素，使其垂直居中。

.parent {
width: 500px;
height: 400px;
text-align: center;
border: 1px solid #dd0;
background: #ffa;
display: table-cell;
vertical-align: middle;
}

并删除所有其他CSS和.helper div

FIDDLE DEMO

- Prasanth K C

---

正如您所指出的，有更好、更清晰的方法来完成这个任务。在当今的网络开发世界中（已经没有人支持IE7了） - 我们通常会使用伪元素来设置样式，或者使用 display: table-cell; 来完成这个任务。这样可以避免不必要的标记。 - Adam Jenkins

@Dmitrii，请查看我的更新答案，你可以在那里找到另一种方法。 - Prasanth K C

实际上，我会在 .parent 上放置 display:table，在 .child 上放置 display:table-cell，这样你会发现以这种方式可以更好地控制。 - Adam Jenkins