DIV中的垂直和水平对齐

Question

I've got a DIV with a BG image, and I want to center just 2 paragraphs both vertically and horizontally within that DIV. Here's the code:

Code:

 #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> 

I've tried a few things, obviously vertical-align:middle; , setting padding to 50% for top & bottom, but no luck.

Any advice would be great :) Thanks! Scott

Answer 1

You can add the following two styles to your image container.

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

https://jsfiddle.net/h3qh9pgu/

I've been looking the whole day for a better solution as the one I gave you will not work for me. Alas, I can't find answers. Hope this works for you. It worked in the fiddle.

Answer 2

I prefer to use top bottom left and right properties to center elements. Change these values to check out how it behaves. And remember to add margin and position properties as shown below.

 #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>