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

我的按钮是在div中。我想更改div的背景，并将所有内容放在页面的中心，如登录页面。

我的代码：

.serverPW{ 
 
font: 18px Arial; 
 
font-color: black; 
 
} 
 

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

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

JSFiddle

来源

2016-11-21 Addy1992

https://jsfiddle.net/g1k95zh5/19/这是我的js小提琴 – Addy1992

的可能的复制[水平居中一个div在一个div（http://stackoverflow.com/questions/114543/horizontally -center-a-div-in-a-div） – BSMP

参见https://css-tricks.com/centering-css-complete-guide/和http://thenewcode.com/723/Seven-Ways-of-使用CSS定位 –

简单的方式来做到这一点：

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

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

来源

2016-11-21 21:16:20

在CSS的说：

margin: 0 auto;

来源

2016-11-21 21:12:51

更改零以更改顶部和底部的边距。 –

如果您使用此方法，请确保您放入div。不在按钮上。 –

.center { 
 
    text-align: center; 
 
}

<div class="center"> 
 

 
    <button>click me!</button> 
 

 
</div>

来源

2016-11-21 21:13:39

以供将来参考，请把中的jsfiddle的答案，但在这里你去：

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

这应该工作。

来源

2016-11-21 21:15:29

那么......你可以在你的HTML中使用'center'标签，但是这会弄乱页面，至少这是我的经历。

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

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

来源

2016-11-22 01:11:10

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

回答

相关问题