Can't center vertical in div use line-heigth in chrome - html

Question

I want to use prop line-height and height center vertically a text input in one div.
Below is the less code snippets:
div.header {
background-color: #6283E6;
height: 70px;
line-height: 70px;
min-width: 1220px;
input.search-input {
border: none;
border-radius: 16px;
background-color: #C9D4F6;
background-image:url('../assets/search.png');
background-repeat: no-repeat;
background-position: 14px, center;
height: 30px;
width: 353px;
padding-left: 49px;
}
}
But the actual effect in chrome is in below:
So why this happened.
Can you tell me?
Below is my Jsx code, Header has only one parent node and this node is the root node.
class Header extends React.Component {
render() {
return (
<div className={style.header}>
<input type="text" className={style['search-input']} />
</div>
);
}
}

Answer 1

I tested your code, and it seems fine to me:
div.header {background-color: #6283E6;
height: 70px;
line-height: 70px;
min-width: 1220px;
}
input.search-input {
border: none;
border-radius: 16px;
background-color: #C9D4F6;
background-image:url('../assets/search.png');
background-repeat: no-repeat;
background-position: 14px, center;
height: 30px;
width: 353px;
padding-left: 49px;
}
<div class="header">
<input type="text" class="search-input">
</div>
There must be something else wrong in code that you didn't show us.
Remember div and input have default margin and padding, so set margin and padding to 0 for both.
Alternatives:
Instead of fixing the height, you can use padding on the top and bottom.
You can use flex.