目前我正在设计我的网站登录，我正在努力让我的工作完全居中(水平)。我已经尝试了所有我能想到的， (left: 50%) , (margin: 0 auto;) 还有一些其他的东西，而且我似乎运气不太好!如果您能帮助我，那就太好了，我是认真的，非常感谢。 我知道这可能是一个简单的解决方法，但作为编码社区的一个相对较新的人，我将不胜感激一些帮助。
如果您有机会完全居中元素，我在下面提供了一个 jsfiddle。 谢谢，
大卫。
https://jsfiddle.net/p62jnu5s/
body,html {
background: repeating-linear-gradient(
to right,
#141517,
#141517 30px,
#1d1f21 30px,
#1d1f21 40px
);
background-size: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.username {
position: absolute;
top: 40%;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 35px;
transition: 500ms all ease;
border: 1px solid #333;
left: 50%;
}
.username:hover {
box-shadow: 0px 0px 4px #000;
}
.password {
position: absolute;
top: 45%;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 35px;
transition: 500ms all ease;
border: 1px solid #333;
left: 50%;
}
.password:hover {
box-shadow: 0px 0px 4px #000;
}
最佳答案
您的标记也需要一些调整。尝试将表单元素放在 div 中。您可以先定位外部 div。然后处理 LoginBox 内元素的定位。在极少数情况下，您会想要或需要 position: absolute。尝试远离它，直到你完全理解它。您可以对 CSS 进行很多调整，但我在下面所做的更改将帮助您开始。
您还应该在所有标记之前声明一个文档类型:
<!DOCTYPE html>
另外将所有内容包装在 html 标记中。
试试这个 CSS:
body,html {
background: repeating-linear-gradient(
to right,
#141517,
#141517 30px,
#1d1f21 30px,
#1d1f21 40px
);
background-size: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.username {
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
margin-bottom: 10px;
}
.username:hover {
box-shadow: 0px 0px 4px #000;
}
.password {
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
}
.password:hover {
box-shadow: 0px 0px 4px #000;
}
.LoginBox {
width: 300px;
margin: 0 auto;
padding: 25px;
background-color: firebrick;
z-index: -3;
box-shadow: 0px 0px 5px #000;
}
.Login {
display: block;
width: 100%;
text-align: center;
font-size: 30px;
font-family: 'Roboto Condensed', sans-serif;
color: #FFF;
}
并将您的标记更改为:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<div class="LoginBox">
<input type="text" name="" class="username" placeholder="Username">
<input type="password" name="" class="password" placeholder="Password">
<a class="Login">Login</a>
</div>
</body>
</html>
关于html - Div 没有完全居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42883560/