製作按鈕在絕對居中和頁面中間

我正在嘗試製作一個大頁面，總是在頁面的絕對中間/中心的單頁。我希望按鈕文本很大，但是當它變大時它會偏移按鈕，並且它不再位於中間。我在這裏做錯了什麼？製作按鈕在絕對居中和頁面中間

（我也有引導安裝並很高興地使用行/列/太偏移）

CSS

.btn-text { 
    vertical-align: middle; 
    font-family: 'Corben'; 
    font-size: 580%; 
} 

.wrapper { 
    text-align: center; 
} 

.btn { 
    position: absolute; 
    top: 50%; 
    padding: 20%; 
}

HTML

... 
<body> 
    <div class="wrapper"> 
    <div class="btn btn-large btn-primary" id="oujh-button"> 
     <div class="btn-text">BUTTON</div> 
    </div> 
    </div> 
</body> 
...

的jsfiddle：https://jsfiddle.net/50ye58oe/1/

來源

2015-11-04 theartofbeing

如果使用CSS3轉換是OK（如果你不需要支持IE < 9）你可以這樣做：

.btn{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
}

來源

2015-11-04 07:32:32 Gubb

RAD，那完全奏效。我絕對不支持IE <9 – theartofbeing

我很高興！這是一個真正實用的方法，用於將任何東西置於其（相對）容器中。樂於幫助！ – Gubb

另一種解決方案是使用引導center-block類水平居中按鈕和Flexbox的垂直居中。

HTML

<div class="wrapper"> 
    <div class="center-block btn btn-large btn-primary" id="oujh-button"> 
     <div class="btn-text">BUTTON</div> 
    </div> 
    </div>

CSS

.btn-text { 
    font-family: 'Corben'; 
    font-size: 280%; 
} 

.wrapper { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
}

來源

2015-11-04 08:11:23

製作按鈕在絕對居中和頁面中間

回答

相關問題