Html 响应引导网格中内容的垂直和水平居中

我在一个引导项目中工作，我需要一些文本与另一行垂直居中。显然，这两行的大小不同，因此内容大小也不同。有没有办法在不升级到flexbox的情况下解决这个问题？或者这是一种方法吗？此外，我希望保持响应能力

小提琴：

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 col-xs-12">
        <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"/>
    </div>
    <div class="col-lg-6 col-xs-12">
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
    </div>
  </div>
</div>

这是一些文本一些文本更多文本

这是一些文本一些文本更多文本

这是一些文本一些文本更多文本

这是一些文本一些文本更多文本

---

您可以创建一个具有相对位置的div，如：

<div style='position: relative; top: 50%; transform: translateY(50%); height:100%;'>

但是使用内联元素并不能很好地工作。注：我将

col-lg-6

更改为

col-sm-6

，因为在codepen中可以看到2列

摘自：

这里有一个工作代码笔：

---

希望有帮助

我不想说得太简单，但您想知道

flexbox

是否是一条可行的道路。其实这个时候是

文本容器背后的原因是您不需要使用

text align:center

如果不想居中，则将文本居中，但文本仍处于水平居中状态

正文{
填料：2米；
}
@介质（最小宽度：1200px）{
.vcenter{
显示器：flex；
对齐项目：居中；
}
.文本{
显示：内联块；
位置：相对位置；
左：50%；
转化：translateX（-50%）；
}
}

这是一些文字，一些文字，还有一些文字

这是一些文本一些文本更多文本

这是一些文本一些文本更多文本

这是一些文本一些文本更多文本

您可以使用

Flexbox

和

媒体查询来完成此操作

对于flexbox，您可以在父元素上使用
display:flex
和
align items:center
，在这种情况下，这将是
行

现在，您只需要将媒体查询中的
min width
调整为与引导断点相同，例如，如果您使用
col-sm-6
引导类，那么768px是断点，您将在媒体查询中使用
@media（min width:768px）{}


对于
列sm-
您可以使用
@介质（最小宽度：768px）
对于
col md-
您可以使用
@媒体（最小宽度：992px）
对于
col lg-
您可以使用
@介质（最小宽度：1200px）


@介质（最小宽度：768px）{
.flex{
显示器：flex；
对齐项目：居中；
}
}

这是一些文本一些文本更多文本

这是一些文本一些文本更多文本

这是一些文本一些文本更多文本

这是一些文本一些文本更多文本

谢谢！但是代码笔似乎并不能说明我想要的结果。为什么不呢？它的工作原理与您发布的图像完全相同。。。注意：“我将col-lg-6更改为col-sm-6，因为在codepen中可以看到2列。”我看到这个：。。但让我再看一看，关键问题是，第一列的图像高度与第二列的高度不同，因此您不能使用此解决方案。如果flexbox是解决方案，该怎么办？有趣的解决方案！不幸的是，由于某种原因，
col-xs-12
从未被触发？我的坏，
flebox
只能使用到
col-xs-12
的断点。请参阅更新的答案。
#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}