CSS Vertical Align Middle

Created For: http://stackoverflow.com/q/10939288/352449

by Glynne Turner

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="search-overlay">
  <div class="search-box">
    <form class="search" action="/search"  >
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</section>

CSS

body {
    width: 100%;
    height: 100%;
}

* {
  box-sizing: border-box;
}
.search-overlay{
    position:absolute; height:100%; width:100%;background-color:#65A7DA;
    display: table;
}
.search-box {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    padding:20px;
    
}
input:focus {outline: none}
form.search input[type=text] {
  padding: 10px;
  font-size: 17px; 
  float: left;
  width: 80%;
  background: #f1f1f1;
  border-radius:20px 0 0 20px;
  border: 2px solid #ffffff;
}

form.search button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #555555;
  color: white;
  font-size: 19px;
  border: 1px solid #ffffff;
  border-left: none;
  cursor: pointer;
  border-radius: 0 20px 20px 0
}

form.search button:hover {
  background: #65A7DA;
}

form.search::after {
  content: "";
  clear: both;
  display: table;
}