How to move Title to the center?
Here's my code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>TP LG PG</title> <link rel="stylesheet" href="am.css" </head> <body> <form class="box" action="tp-lgpg.html" method="post"> <h1>Login</h1> <input type="text" name="" placeholder="Username"> <input type="password" name="" placeholder="Password"> <input type="submit" name="" value="Login"> </form> </body> </html> and here's the css body{ margin: 0; padding: 0; font-family: sans-serif; background: #34495e; } .box{ width: 300px; padding: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #191919: text-align: center; } .box h1{ color: white; text-transform: uppercase; font-weight: 500; position: center; } .box input[type = "text"],.box input[type = "password"]{ border: 0; background: none; display: block; margin: 20px auto; text-align: center; border: 2px solid #3498db; padding: 14px 10px; width: 200px; outline: none; color: white; border-radius: 24px; transition: 0.25s; } .box input[type = "text"]:focus,.box input[type = "password"]:focus{ width: 280px; border-color: #2ecc71; } .box input[type = "submit"]{ border: 0; background: none; display: block; margin: 20px auto; text-align: center; border: 2px solid #2ecc71; padding: 14px 40px; outline: none; color: white; border-radius: 24px; transition: 0.25s; cursor: pointer; } .box input[type = "submit"]:hover{ background: #2ecc71; }
Often have questions like this?
Learn more efficiently, for free:
