Question

我正在试图弄清楚如何让我创建的这个按钮位于页面的正中心（垂直和水平）。我把它放在水平面的中心，但不是在垂直的平面上。任何帮助将不胜感激！

input#gobutton{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
cursor:pointer; 
padding:5px 25px; 
background:#87CEFA; 
border:1px solid #1E90FF; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
color:#f3f3f3;
font-size:1.1em;
}

Answer 1

将位置更改为绝对或固定。

Answer 2

输入

文字对齐：中心; 填充：50px 0;

http://www.w3schools.com/css/css_align.asp

Answer 3

我不确定这是否是您需要的，但请看一下JSFiddle example。

我使用的CSS是：

input#gobutton{
    position: relative;
    display: block;
    margin: auto;
    top: 40%;
    cursor:pointer; 
    padding:5px 25px; 
    background:#87CEFA; 
    border:1px solid #1E90FF; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
    box-shadow: 0 0 4px rgba(0,0,0, .75);
    color:#f3f3f3;
    font-size:1.1em;
}

CSS代码到水平和垂直中心按钮

3 个答案: