Center Placeholder in Input Field

The placeholder in my input element has a space on top and bottom of it, I want to remove that spacing so that my placeholder will be centered to the top and bottom of my element, I've tried: line-height: 0, vertical-align etc and it hasn't made a difference.

I'm testing it in Chrome (view in full page)

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

.call-back-wrapper {
    display: flex;
    flex: 1;
}


#call_back {
    background: #383E46 0% 0% no-repeat border-box;
    border: none;
    color: #F4A95080;
    padding-left: 27px;
padding-top: 18px;
padding-bottom: 18px;
min-width: clamp(9.615rem, 10.732vw + 2.746rem, 15.625rem);

}

input[id^="call_back"]:focus {
    outline: none;
    color: #F4A95080;

        cursor: auto;
}

input:focus[id^="call_back"]::placeholder {
    color: transparent;
}

#call_back::placeholder {
    text-align: left;
font: normal normal normal clamp(0.654rem, 0.73vw + 0.187rem, 1.063rem)Poppins;
color: #F4A95080;
opacity: 1;
}


.submitBtn {
    text-align: left;
font: normal normal normal clamp(0.615rem, 0.688vw + 0.175rem, 1rem)Poppins;
letter-spacing: 0px;
color: #383E46;
background: #F4A950 0% 0% no-repeat;
cursor: pointer;
border: none;
}

.submitBtn:hover {
    opacity: 0.7;
}

<form method="post" name="myemailform" class="call-back-wrapper"action="form-to-email.php">
                <input type="tel" id="call_back" name="call_back"
                  placeholder="Phone Number" onkeypress="return onlyNumberKey(event)" required />
                  <button class="submitBtn">Call Back</button>
              </form>

Image of how I want it to look [1]: https://i.sstatic.net/0qJbH.png Reference on how it appears in my code, highlighted in chrome(you can see the extra space on the top and bottom of placeholder [2]: https://i.sstatic.net/4P4aF.png Reference Image of how it appears in chrome [3]: https://i.sstatic.net/PMKa1.png Without padding top or bottom it still has a space: [4]: https://i.sstatic.net/gchm5.png

Solution

Try with this piece of CSS.

input[type="tel"]::placeholder {
   text-align: center;
}