在我們的佈局中，水平居中很容易，但垂直居中稍微有點複雜。下面就給大家分享下通過Flex佈局輕鬆實現登錄框在水平、垂直方向上的居中效果。
完整代碼：
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
/*登錄框水平垂直居中*/
justify-content: center;
align-items: center;
background-color: #f2f2f2;
}
main {
width: 700px;
background-color: white;
box-shadow: 2px 2px 10px #808080;
}
h3 {
font-size: 2.5rem;
letter-spacing: 6px;
text-align: center;
font-weight: 500;
margin-top: 48px;
}
form {
margin: 60px 80px 100px;
}
form > p {
margin-bottom: 20px;
display: flex;
}
form > p > input {
flex: 1;
height: 52px;
border: 1px solid #c3c6cf;
border-radius: 3px;
padding-left: 6px;
transition: linear 0.4s;
}
form > p > input:hover,
form > p > input:active,
form > p > input:focus{
border-color: #464d5f;
outline: none;
box-shadow: 2px 8px 8px rgba(70, 77, 95, 0.15);
}
form > p:last-child {
margin: 56px 0 0;
}
form > p:last-child > input{
border: none;
}
form > p:last-child > input:hover,
form > p:last-child > input:focus{
border: none;
box-shadow: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex實現用戶登錄水平垂直居中</title>
<link rel="stylesheet" href="css/style4.css">
</head>
<body>
<main>
<h3>用戶登錄</h3>
<form action="" method="post">
<p>用戶：</p>
<p>
<input type="text" id="username" name="username">
</p>
<p>密碼：</p>
<p>
<input type="password" id="password" name="password">
</p>
<p>
<input type="submit" id="submit" value="登錄">
</p>
</form>
</main>
</body>
</html>
代碼效果：
總結：felx 設置元素水平垂直居中佈局非常方便，三句代碼搞定：
/*登錄框水平垂直居中*/
justify-content: center;
align-items: center;
background-color: #f2f2f2;
| THE END ! |