在 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/

我整天都在寻找更好的解决方案，因为我给你的解决方案对我不起作用。唉，我找不到答案。希望这对你有用。它在小提琴中奏效了。

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>