html - 在 100% 高度的 div (Bootstrap) 中居中 div(垂直和水平)

Question

一周以来我一直在努力解决我的问题，我真的尝试了一切!我有一个两列布局(左:内容/右:内容描述)。我想要这两列全高页面，我找到的唯一方法是:

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

#rightcol {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    height: 100%;
    text-align: right;
}

在我的列中使 div 居中的最接近的方法是使用(在 CSS3 中)flexbox。但是与我专栏的绝对位置有冲突。

这是我为了更明确而制作的 bootply: http://www.bootply.com/1OovYNhx1E#

在这个例子中，我想将 <h1>TEXT</h1> 居中(水平和垂直)

Answer 1

更新

Bootply 是一个糟糕的工具。所以我用 Plunker 来复制你的例子。这包括 Bootstrap 和您最初拥有的一切，除了:

• .fluid-container 和.row 合并。
• #inner 现在移出了 #leftcol
• #inner 具有前面提到的规则集。
• 两列都更改了高度:100vh
• 在正文中添加了position: relative。

• 为 html 和 body 元素添加了 width:100% 和 height:100%。

     #inner {
         position: absolute;
         left: 50%;
         top: 50%;
         bottom: -50%; /* This was added to offset the top: 50% which was keeping the #inner from scrolling any further to the top. */
         transform: translate(-50%, -50%);
         z-index: 9999;
     }
  

PLUNKER

---

老

在中心元素上使用以下规则集:

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

您不清楚这个居中的 div 应该相对于哪里居中。如果您希望它相对于视口(viewport)居中(即屏幕的边缘到边缘)，则中心 div 不应位于任何列内。如果您希望它在左列中居中，那么它位于正确的位置。无论如何，如果您使用此解决方案，它会在您放入的任何内容中完美地居中。

片段

body {
        position: relative;
        margin: 0;
        height: 100%;
        padding: 0;
}

#leftcol {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
    height: 100%;
    width: 50%;
    text-align: left;
    background: brown;
}
#rightcol {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    height: 100%;
    width: 50%;
    text-align: right;
    background: yellow;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  outline: 3px solid red;
  width: 25%;
  height: 25%;
  background: rgba(0,0,0,.4);
}
  

<div id='leftcol'></div>
<div class='center'></div>
<div id='rightcol'></div>