水平对齐和垂直居中容器中的三个元素答案

【问题标题】：horizontally align and vertically center three elements in a container水平对齐和垂直居中容器中的三个元素
【发布时间】：2015-09-05 01:12:48
【问题描述】：

我需要对齐 Div 中的 3 个项目。

每个项目都必须垂直放置在中心。

第一项左侧边距 2%。
居中的第二个项目，必须是文本框。
第三项 2% margin-right。

第一个和第三个项目必须适合 div(square)。

我使用了对齐，但它不起作用。这里有一个图形示例：

【问题讨论】：

能否请您在jsfiddle上显示您的代码

标签： html css

【解决方案1】：

HTML

<div id="container">
    <div class="box" id="left"></div>
    <input type="text" name="search" placeholder="SEARCH HERE" id="searchbox">
    <div class="box" id="right"></div>  
</div><!-- end #container-->

CSS

#container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    height: 90px;
    background-color: orangered;
}

.box {
    height: 75px;
    width: 75px;
    background-color: lightgreen;
}

#left {
    margin-left: 2%;
}

#right {
    margin-right: 2%;
}

input {
    width: 250px;
    padding: 18px;
    font-size: 2em;
}

演示：http://jsfiddle.net/xptx9wxn/2/

有关 CSS Flexbox 的更多信息，请访问：

【讨论】：

你可以在没有浮动和边距的情况下做到这一点吗？如果没有这些确切的限制，我无法让最右边的框不下拉一行。
有很多方法可以使元素居中。在这个例子中，我使用了 flexbox 和 flex 属性。不涉及浮点数，唯一的边距是问题中所需的边距（否则，我也可以使用justify-content: space-around 进行水平对齐）。
我喜欢这个。它是浮动臃肿 div 的优雅替代品。
听起来不像是一个销售员，但中心化事情从未如此简单和高效。 Flexbox 解决了许多过去需要更多代码的问题。唯一要记住的是，所有主流浏览器都支持 flexbox，except IE 8 & 9。
如果横向盒子是 img 我怎么能垂直居中它们？