使用Bootstrap在页面上居中媒体对象

Question

我一直在寻找关于如何在我的页面中间将Bootstrap中的媒体对象居中的方法。我认为它应该非常简单，但我无法想办法。我以前把它放在一个居中的栏目中，但不能将它放在实际的栏目中，以便它看起来像。这是我最近的尝试，但仍然无效。我已将text-align:center添加到中心块CSS。任何建议都会非常感激。

    <div id="email" class="center-block">
      <div class="media">
        <a class="media-left" href="#">
          <img src="pictures/computerIcon.jpg" alt="...">
        </a>
        <div class="media-body">
          <h3 class="media-heading">email@example.com</h3>
        </div>
      </div>
    </div>

Answer 1

目前尚不清楚您希望将媒体对象置于哪个容器中，我假设您希望将其置于整个屏幕的中心位置。

• html，body和.outer容器都会获得height: 100%，以使.outer容器占据整个屏幕。
• .outer容器在定位position: relative容器时会获得.inner来引用其位置/尺寸。
• .inner容器获取position: absolute以将其带到文档流之外（否则它占用屏幕宽度100%，这也是类{{1}的原因没有做任何事情）
• 通过添加.center-block和.inner
，.outer容器的左上角移动到top: 50%容器的中心
• 要将left: 50%容器移回屏幕中心，我们需要将其移动一半宽度和高度，这可以通过`transform：translate（-50％， - 50％）来完成。

此解决方案应该从IE9开始工作（添加.inner以获得IE9支持）并​​且仅当-ms-transform对象的内容不超过屏幕宽度的一半或高度的一半时

.media

html,
body {
  height: 100%;
}

.outer {
  position: relative;
  height: 100%;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}