在 100% 高度的 div 中居中 div（垂直和水平）（引导程序）

Posted 2023-03-29

【中文标题】在 100% 高度的 div 中居中 div（垂直和水平）（引导程序）

【英文标题】：Center div (vertically & horizontally) in a 100% height div (Bootstrap)

【发布时间】：2016-12-13 16:12:46

【问题描述】：

我从一个星期开始就在尝试解决我的问题，我真的尝试了一切！ 我有一个两列布局（左：内容/右：内容描述）。 我想要这两列全高页面，我找到的唯一方法是：

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。但是与我的列的绝对位置存在冲突。

这是我更明确的引导： http://www.bootply.com/1OovYNhx1E#

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

【问题讨论】：

添加 'display: flex;证明内容：中心；对齐项目：中心；'到左列

@mlegg 是的，这几乎是完美的答案，除了：当我的 leftcol div 中有很多文本时，文本在页面顶部被“剪切”。当有不止一张图片时，也会发生同样的事情。编辑：就像这个截图一样，（我们看不到文本的开头）HERE

“在顶部消失”问题仅在最小调整窗口大小时发生，或者例如在手机上（横向模式）。

【参考方案1】：

更新

Bootply 是一个糟糕的工具。所以我用 Plunker 来复制你的例子。这包括 Bootstrap 和你原来拥有的所有东西，除了：

.fluid-container 和 .row 组合在一起。 #inner 现已移出 #leftcol #inner 具有前面提到的规则集。 两列都更改了height: 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 应该在哪里居中。如果您希望它相对于视口居中（即屏幕边缘到边缘），则中心 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>

【讨论】：

将position: relative 添加到正文中。

这并没有改变任何东西...图像在顶部被裁剪...（在 chrome、safari、firefox 上测试）。

@Befa 测试更新，我把图片放在右边，文字放在左边。您应该制作一个显示裁剪问题的示例。

1.On THIS EXAMPLE ：在全屏模式下，img 在顶部被裁剪。在迷你窗口（例如横向手机）中，它与预期的一样完美（垂直和水平居中）。 2.On THIS EXAMPLE ：全屏显示正常。但是在调整大小窗口（或横向手机）中，顶部被裁剪。 （如果我可以滚动查看内容，裁剪是可以的，但我不能！）

感谢您抽出宝贵的时间，但我需要我的内在位于左栏的中心，请注意身体！

【参考方案2】：

终于找到答案HERE

使用 flexbox 只需添加到您的内部容器：

margin: auto;

它将防止顶部滚动问题！