Question

如何将按钮放在页面中央？

我的按钮位于div中。我想更改div的背景并将所有内容放在页面的中心，就像登录页面一样。

我的代码：

.serverPW{
font: 18px Arial;
font-color: black;
}

.serverPwClass {
	-moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #44b395), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #44b395 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #44b395 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #44b395 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #44b395 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #44b395 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#44b395', endColorstr='#6c7c7c',GradientType=0);
	background-color:#44b395;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:11px 23px;
	text-decoration:none;
	text-shadow:0px -1px 0px #2b8a7c;
	top: 50%;
left: 50%;
}
.serverPwClass:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #44b395));
	background:-moz-linear-gradient(top, #6c7c7c 5%, #44b395 100%);
	background:-webkit-linear-gradient(top, #6c7c7c 5%, #44b395 100%);
	background:-o-linear-gradient(top, #6c7c7c 5%, #44b395 100%);
	background:-ms-linear-gradient(top, #6c7c7c 5%, #44b395 100%);
	background:linear-gradient(to bottom, #6c7c7c 5%, #44b395 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#44b395',GradientType=0);
	background-color:#6c7c7c;
}
.serverPwClass:active {
	position:relative;
	top:1px;
}

	<div class="serverPW">
		<label>Server password</label>
		<form id ServerLogin>
			<input id= "serverPassword" type="password" class= "serverPwClass" placeholder="Password">
		</form>
	</div>

JSFiddle

Answer 1

简单的方法：

.button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  max-width: 400px;
}

这将水平和垂直对齐您的按钮。

Answer 2

在CSS中：

margin: 0 auto;

Answer 3

＆＃13;

.center {
  text-align: center;
}

＆＃13;

<div class="center">

  <button>click me!</button>

</div>

＆＃13;

Answer 4

为了将来的参考，请把JSFiddle放在答案中，但是你走了：

.serverPW{
position: absolute;
height: 100%;
font: 18px Arial;
font-color: black;
text-align: center;
}

这应该有效。

Answer 5

嗯......你可以使用＆＃39;中心＆＃39;在你的HTML中标记但是，它会弄乱页面，至少是我的经历中发生的事情。

在CSS中使用以下代码作为按钮。

.button{
position: absolute;
height: 100%;
font-size: 18px;
color: black;
text-align: center;
}

HTML CSS - 如何将按钮放在页面的中心

5 个答案: