<input type="text">要素を、上下で中央添えしたい

Question

<input type="text">要素を、上下で中央添えしたい

htmlとcssで、airbnbのサイト（https://www.airbnb.jp/gift）の模写をしているのですが、<input type="text">で作った検索フォーム（に見立てたもの）をflexで横に並べたところ、marginなどが、効かなくなり、line-heightやvertical-alineも効かず、上下での中央添えができなくなってしまいました。
現在の状況は、上下の中央より少し下に検索フォームがあるという状況です。ちなみに、検索フォームの左側に、logoが入ってますが、そのlogoには、marginが効いています。
positionを使えば位置を合わせることは、できるのですが、そうするとレスポンシブ化する際可変的でなくなってしまうので、違うやり方で、やりたいです。

発生している問題・エラーメッセージ

エラーメッセージはありません

該当のソースコード

　　<header>
		<div class="header-left">
		   <i class="fab fa-airbnb fa-fw colorchoise"></i>
		   <input type="text" size="44" name="探す" class="fas heightchoise" placeholder="   &#xf002;  探す">
        </div>
　　</header>

header{
	height:80px;
	width:100%;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
}

.header-left{
	height:80px;
	position: absolute;
}



.colorchoise{
	color: #ff595e;
	margin-left: 26px;
	margin-top: 22px;
	margin-right: 17px;
	font-size: 35px;
	
}


.heightchoise{
	padding: 15px 0 ;
    font-size: 17px;
    border-radius: 5px;
    border-style: none;
    border: 1px solid #ebebeb;
    box-shadow: 0px 3px 10px -5px rgba(0,0,0,0.5);
    position: absolute;
    top: 25px;
    left: 40px;
}


.heightchoise:hover{
    box-shadow: 0px 3px 10px -3px rgba(0,0,0,0.5);

試したこと

line-height　vertical-aline position-abusolute margin-top margin-bottom

補足情報（FW/ツールのバージョンなど）

html5 　css3 　bootstrap4　 MacbookPro最新バージョン　google Chrome テキストエディタはSublime Textを使用

Answer 1

テキストボックスの配置場所をposition: absoluteで絶対位置として指定しているのでこれを直さない限りは上下中央になることはないかと思います。

ただ1つ気になるのは、position: absoluteを指定する場合は、この要素を基準として絶対位置を決めるためにposition: relativeを宣言するのですが、記載いただいたコードには見当たらないのでどの要素を基準として位置を決めているのかが分からないです。
まずは基準となる要素をどこにするか決めてから位置を調整する様にした方が良いかと思います。

.heightchoise {
    padding: 15px 0;
    font-size: 17px;
    border-radius: 5px;
    border-style: none;
    border: 1px solid #ebebeb;
    box-shadow: 0px 3px 10px -5px rgba(0,0,0,0.5);

    /* 以下3行で位置を決めている。 */
    position: absolute;
    top: 25px;
    left: 40px;
}

Answer 2

　　<header>
        <div class="header-left">
          <div>
           <i class="fab fa-airbnb fa-fw colorchoise"></i>
           <input type="text" size="44" name="探す" class="fas heightchoise" placeholder="   &#xf002;  探す">
          </div>
        </div>
　　</header>

header{
    height:80px;
    width:100%;
    background-color: #000;
}
.header-left{
    height:80px;
    display: flex;
    align-items: center;
}
.colorchoise{
}
.heightchoise{
    padding: 15px 0 ;
    font-size: 17px;
    border-radius: 5px;
    border-style: none;
    border: 1px solid #ebebeb;
    box-shadow: 0px 3px 10px -5px rgba(0,0,0,0.5);
}
.heightchoise:hover{
    box-shadow: 0px 3px 10px -3px rgba(0,0,0,0.5);
}

Comments

[takato.work]

回答ありがとうございます。とても参考になりました。