首页html登陆界面居中

html登陆界面居中

时间: 2023-12-15 09:32:52 浏览: 93

以下是一个HTML登陆界面居中的例子： ```html <!DOCTYPE html> <html> <head> <title>用户登陆</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; } form { display: flex; flex-direction: column; align-items: center; padding: 20px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; } input[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; } </style> </head> <body> <form> <h2 style="text-align: center;">用户登陆</h2> <label for="username">用户名：</label> <input type="text" id="username" name="username" value="guest"> <label for="password">口令：</label> <input type="password" id="password" name="password" value="guest"> <input type="submit" value="登陆"> </form> </body> </html> ```

阅读全文