我想將exactCenter div居中對齊頁面的中心。我正在使用bootstrap。我試着如下，但由於動態寬度（我需要寬度是動態的），我不知道如何將它居中到頁面的中心？Centering Dynamic div

我創建了一個Fiddle

<div class="wrapper row"> 
    <div class="col-xs-12 col-sm-6 col-md-4 exactCenter">Test</div> 
</div>

CSS：

.wrapper{ 
    width: 100%; 
    height: 100%; 
    position: fixed; 
} 
.exactCenter { 
    position: fixed; 
    background-color: #00FF00; 
    top: 50%; 
    left: 50%; 
    text-align: center; 
    /*margin-top: -15%; 
    margin-left: -30%; */ 
}

編輯：

我想避免transform: translate(-50%, -50%); - 有時文本是模糊的。

所有答案我googled有一個固定的寬度和高度（內部div）。但在我的情況下，寬度和高度是動態的。

來源

2015-11-27 Becky

只需添加'變換：翻譯（-50％，-50％）;'來'.exactCenter' http://jsfiddle.net/o0h5ptv6/3/ –

@NenadVracar謝謝。 :)我想避免'transform：translate（）'。因爲它會使文本在某些場合模糊。我正在尋找一種不帶'transform：translate（）'的替代解決方案。 – Becky

但是你想用'position：fixed;'？ –

試試這個：

.exactCenter { 
    position: absolute; 
    margin: auto; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    width: 200px; 
    height: 100px; 
    background-color: #ccc; 
    border-radius: 3px; 
}

有很多不同的方式來做到這一點 - 這只是一個簡單的例子

來源

2015-11-27 13:04:48

正如我所提到的，寬度是動態的。我使用引導程序的欄寬。所以使用'width：200px;身高：100px;'不適合我。 – Becky

Centering Dynamic div

編輯：

回答

相關問題