Question

我希望水平和垂直中心将一对输入作为表单的一部分显示在div的中间。我该如何正确地做到这一点？我现在只能让它们水平居中。

这是HTML：

<body>
    <div id='flightdates'>
        <div id='wrapper'>
            <form id='dates'>Departing:
                <input type='text' id='departing'>
                <br/>Returning:
                <input type='text' id='returning'>
            </form>
        </div>
    </div>
</body>

这是CSS：

#flightdates {
    height: 50px;
    background-color: yellow;
}
#wrapper {
    text-align: center;
    vertical-align: middle;
}

Answer 1

试试这个：

.className{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
}

根据评论。这里的想法是必须将位置设置为绝对位置，以便左侧和顶部正确反应。这个百分比实际上并不像看起来那么简单。它没有考虑它定位的弦的宽度或高度。所以它似乎仍然有点不合适。你可能需要调整一下。

Answer 2

在第一次输入后添加<br/>

检查解决方案：http://jsfiddle.net/t6LWR/

Answer 3

DEMO

使用display：table＆amp; table-cell创建一个像布局一样的表。支持垂直对齐中间。

这是CSS：

#flightdates {
    height: 50px;
    background-color: yellow;
    display: table;
    width: 100%;
}
#wrapper {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

Answer 4

它们看起来是水平居中的 - 但是如果您还希望将它们垂直居中，只需添加一个CSS定义：

#dates{
    line-height:50px;
}

line-height匹配#flightdates的高度。这是一个JSFiddle来演示。希望这可以帮助！如果您有任何问题，请告诉我。

Answer 5

将line-height:50px;添加到#wrapper

#wrapper {
    text-align: center;
    vertical-align: middle;
    line-height:50px;
}

<强> jsFiddle edxample

Answer 6

如果您的意思是希望将表单中心水平和垂直，则可以使用CSS转换技巧：

#flightdates {
    height: 50px;
    background-color: yellow;
    position: relative;
}
#wrapper {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

http://jsfiddle.net/teddyrised/yYz6C/1/

事实上，#wrapper不是必需的。您可以将其取出，并将样式应用于表单元素。

将输入集中在div的中间

6 个答案: