如何制作一个带有图标的输入栏响应式，垂直居中它所在的表单？

Question

I have two input bars with icons on the left side centered inside a form, which is also centered horizontally. Unfortunately, shrinking the page horizontally causes the placeholder text, and the icon to cross each other, and I have still not managed to find a way to center the form vertically. What can I do fix both issues?

 .body-color{ background-color: rgb(30,94,255); } .signup-form{ text-align: center; margin: auto; margin-top: 5%; width: 50vw; height: fit-content; border-radius: 15px; background-color: white; box-shadow: 0 0 15pt 2pt black; } input{ width: 75%; margin-top: 20px; margin-bottom: 15px; padding: 10px; border-radius: 20px; border: 0; box-shadow: 0 0 15pt 2pt #D3D3D3; outline: 0; text-indent: 35px; } .input-container{ position: relative; } i{ position: absolute; font-size: 25px; top: 30px; left: 75px; }

 <form class="signup-form"> <div class="input-container"> <i class="bi bi-person-circle"></i> <input type="text" required placeholder="Username"/> </div> <div class="input-container"> <i class="bi bi-lock"></i> <input type="password" required placeholder="Password"/> </div> </form>

Answer 1

I think it will be useful for you. The solution was to add padding to .signup-form and change the width to 100% .

 * { } .body-color { background-color: rgb(30, 94, 255); } .signup-form { text-align: center; margin: auto; margin-top: 5%; width: 50vw; height: fit-content; border-radius: 15px; background-color: white; box-shadow: 0 0 15pt 2pt black; padding: 15px 25px; /* New line */ } input { width: 100%; /* Changed */ margin-top: 20px; margin-bottom: 15px; padding: 10px; border-radius: 20px; border: 0; box-shadow: 0 0 15pt 2pt #d3d3d3; outline: 0; text-indent: 35px; box-sizing: border-box; /* New line */ } .input-container { position: relative; } i { position: absolute; font-size: 16px; /* Changed */ top: 30px; left: 17px; /* Changed */ }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <form class="signup-form"> <div class="input-container"> <i class="bi bi-person-circle"></i> <input type="text" required placeholder="Username" /> </div> <div class="input-container"> <i class="bi bi-lock"></i> <input type="password" required placeholder="Password" /> </div> </form>