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％，但沒有運氣。

任何建議將是巨大的:)謝謝！ 斯科特

Answer 1

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

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

https://jsfiddle.net/h3qh9pgu/

我整天都在尋找更好的解決方案，因為我給您的解決方案對我來說不起作用。 las，我找不到答案。 希望這對您有用。 它在小提琴中起作用。

Answer 2

我更喜歡使用top bottom left和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>