将容器中的三个元素水平对齐并垂直居中

Question

I need to align 3 items inside Div.

Every item must be placed vertically in the center.

• First item 2% margin-left.
• Second item in the center and must be a textbox.
• Third item 2% margin-right.

Item First and Third must fit the div(square).

I used alignment but it didn't work. Here there is a graphic example:

Answer 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;
}

DEMO: http://jsfiddle.net/xptx9wxn/2/

For more information about CSS Flexbox visit:

• A Complete Guide to Flexbox
• Using CSS flexible boxes - Web developer guide | MDN