垂直和水平對齊DIV

Question

我有一個帶有BG圖像的DIV，我想在該DIV中垂直和水平方向只居中兩段。下面的代碼：

代碼：

#dark-table-carol { 
 
    background-color: #2e2e2e; 
 
    width: 100%; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    padding-left: 40px; 
 
    padding-right: 40px; 
 
    text-align: left; 
 
    margin-top: 30px; 
 
    margin-bottom: 30px; 
 
    background-image: url(http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/carol-candy-carts-quote.jpg); 
 
    height: 600px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    margin: auto; 
 
    /* 
 
    position: absolute; 
 
    background-size:contain; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    */ 
 
}

<div id="dark-table-carol"> 
 
    <h3 id="dark-table-head-style" align="center">"It was like Scott reached into my head and saw exactly what I wanted to achieve. He brought my ideas to life very quickly!</h3> 
 
    <p id="dark-table-paragraph" align="center"> 
 
    Carol Davies - Carol's Candy Carts 
 
    </p> 
 
</div>

我已經嘗試了幾件事情，顯然vertical-align:middle;，頂級&底部設置填充至50％，但沒有運氣。

任何建議將是偉大的:)謝謝！ Scott

Answer 1

您可以將以下兩種樣式添加到圖像容器。

display: table-cell; 
vertical-align: middle; 

https://jsfiddle.net/h3qh9pgu/

我一直在尋找一個更好的解決方案作爲一個我給你會不會爲我工作了整整一天。唉，我找不到答案。希望這對你有用。它在小提琴中奏效。

Answer 2

我更喜歡使用topbottomleft和right屬性來居中元素。 更改這些值以檢查其行爲。並記住添加margin和position屬性，如下所示。

#container{ 
 
    position:relative; 
 
    width:300px; 
 
    height:300px; 
 
    border:dotted 1px #33aaff; 
 
} 
 

 
#child{ 
 
    width:50px; 
 
    height:50px; 
 
    background-color:#ff55aa; 
 
    
 
    position: absolute; 
 
    margin:auto; 
 
    top:0; 
 
    left:0; 
 
    bottom:0; 
 
    right:0; 
 
}

<div id="container"> 
 
    <div id="child"></div> 
 
</div>

Answer 3

#dark-table-carol { 
 
    display: table; 
 
    background-color: #2e2e2e; 
 
    width: 100%; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    padding-left: 40px; 
 
    padding-right: 40px; 
 
    text-align: left; 
 
    margin-top: 30px; 
 
    margin-bottom: 30px; 
 
    background-image: url(http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/carol-candy-carts-quote.jpg); 
 
    /*background-size:contain; */ 
 
    height: 600px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    margin: auto; 
 
    /*position: absolute; 
 
      top: 0; left: 0; bottom: 0; right: 0;*/ 
 
} 
 
.inner { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<div id="dark-table-carol"> 
 
    <div class="inner"> 
 
    <h3 id="dark-table-head-style" align="center">"It was like Scott reached into my head and saw exactly what I wanted to achieve. He brought my ideas to life very quickly!</h3> 
 
    <p id="dark-table-paragraph" align="center"> 
 
     Carol Davies - Carol's Candy Carts 
 
    </p> 
 
    </div>