RWD：垂直居中 2 个 div答案

【问题标题】：RWD: Centering 2 divs verticallyRWD：垂直居中 2 个 div
【发布时间】：2016-04-26 20:41:44
【问题描述】：

我想将 2 divs 垂直居中，我厌倦了使用 vertical-align: middle 但这不起作用，还尝试了 margin，不起作用。

我可以做些什么来使这两个居中？

代码

.about{
    text-align: center;
    position: relative;
}

.aboutImg {
    position: absolute;
    width: 100%; 
    left: 0px;
}
.textContainer {
    position: relative; 
    width: 60%; 
    margin-left: auto;
    margin-right: auto;
    z-index: 20;
}

<div class="about" id="aboutStrings">
  <img class="aboutImg" src="about1.jpg">
  <div class="textContainer">
    <h1>About Strings</h1>
    <p>Strings Ramen Shop pulls a piece of Japanese Culture to Chicago, we can be found in the heart of Chinatown, directly across from New Chinatown Square. While other restaurants may serve ramen along with a number of other entrees, Strings Ramen focuses specifically on ramen. Along with ramen, Strings will also offer the appetizing oden, a Japanese winter street food. On top of tasting delightful, the ramen at Strings is also affordable but gives the option of adding more deluxe ingredients. The menu includes four types of ramen broth with a variety of high-end ingredients that are added to make the dish even more delectable.
                One of the major aspects of Strings is the noodles themselves. Strings will make fresh noodles daily using only their unique dough mixer and noodle maker imported straight from Japan. The use of fresh noodles, and genuine broth combined with passion and the use of only the best ingredients will certainly set Strings Ramen Shop apart.</p>
  </div>
</div>

我还希望图像根据屏幕大小调整大小，最重要的是，文本应该始终包含在图像中。因此，如果屏幕变小时段落的高度拉伸到 500 像素，则图像高度应自动调整大小以包含文本。我已经包含了 Bootstrap css。

【问题讨论】：

只是确保我理解，您希望内部 <div> 在 .about div 中垂直居中？

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

不使用 Flexbox，可以使用一些绝对定位来实现。

.about {
  position: relative;
}
.textContainer {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这将使textContainer 在about 容器内垂直居中。

CSS Tricks 为here 提供了很好的资源。

【讨论】：

【解决方案2】：

vertical-align:middle 仅适用于inline-block 级别元素

在你的 CSS 中试试这个

.about{
  text-align: center;
}
.aboutImg {
  width: 40%; 
  display: inline-block;
  vertical-align:middle;
}
.textContainer {
  width: 40%; 
  display: inline-block;
  vertical-align:middle;
}

【讨论】：

你也可以将它应用到.about div 并在其中垂直居中所有内容
Your wrong 适用于内联级和表格单元格元素。它也适用于::first-letter 和::first-line。

【解决方案3】：

在使用之前阅读vertical-align: middle;。

当您使用vertical-align: middle; 时，父元素的高度必须大于其内容，否则它不会垂直居中。

注意：值 0 不应指定单位。

这是一个简单的weave，它准确地展示了它是如何完成的。

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: rgb(0, 28, 66);
  font: 20px arial;
}

header {
  display: table;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

nav {
  display: table-cell;
  vertical-align: middle;
}

<header>
  <nav>
    <h1>
    	Hello
    </h1>
  </nav>
  <nav>
    <h1>
    	world!
    </h1>
  </nav>
</header>

【讨论】：