垂直和水平对齐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>