垂直对齐绝对元素/ Flexbox答案

【问题标题】：Vertical Align Absolute Elements / Flexbox垂直对齐绝对元素/ Flexbox
【发布时间】：2017-06-25 09:27:39
【问题描述】：

每次我解决布局问题时，我似乎都在创建一个新问题。我有一个问题在我正在构建的文本滑块上得到了很好的解决。相比之下，JS 部分很容易。我要做的就是在父容器内有两个绝对定位的元素，它们与外包装垂直对齐。

我在这里重新创建了问题：http://codepen.io/emilychews/pen/oBPjbR

我必须保留某些元素，所以我无法摆脱滑块包装，但我希望两组文本都位于外部元素的垂直中间。任何帮助都可以阻止我的头发脱落。

.outerwrap {
background:red;
width: 100%;
height: inherit;
padding: 10% 5%;
}
.bb_slide_text2 {
position: absolute;
top: 0;
padding-top: 10%;
}

<section class="outerwrap">
  <div class="bb_slidetextwrapper2">
    <div class="bb_slide_text bb_slide_text1">
      <h2>First Heading</h2>
      <p>First line of text</p>
    </div>
    <div class="bb_slide_text bb_slide_text2">
      <h2>Second Heading</h2>
      <p>Second Line of text</p>
    </div>
  </div>
</section>

艾米丽

【问题讨论】：

标签： html css alignment flexbox

【解决方案1】：

首先为.bb_slide_text 删除position:absolute，如果你想要它们是左右的（因为你同时设置了top:0 我认为这是这样）：

.bb_slidetextwrapper2 {
   display: flex;
   justify-content: space-between;
   padding: 0 30px;
}

如果您希望它们逐行位于红色屏幕的中间，请忘记上述样式并使用此样式：

.bb_slidetextwrapper2 {
display: flex;
justify-content: space-between;
padding: 0 30px;
flex-direction: column;
justify-content: center;
align-items: center;
}

我在您的示例中看到了另一个问题，我建议这样使用：

* {
box-sizing: border-box;
}

【讨论】：

【解决方案2】：

如果你想在容器中使用absolute，你应该将它设置为relative作为位置子元素的引用。

然后尺寸、坐标和margin 可以完成剩下的工作。

    .outerwrap {
      background: red;
      width: 100%;/* a false good idea, no need but if used mind box-sizing */
      box-sizing: border-box;/* this includes padding and border into width calculation */
      height: inherit;
      padding: 10% 5%;/* here comes the padding to add or not to width ... */
      position: relative;/* helps to hold absolute child */
    }
    
    h2,
    p {
      margin: 0;
    }
    
    .bb_slide_text {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 3em;
    }
    
    .bb_slide_text2 {
      right: 5%;
    }

<section class="outerwrap">
<!--   slide wrapper -->
  <div class="bb_slidetextwrapper2">
<!--     first slide -->
    <div class="bb_slide_text bb_slide_text1">
      <h2>First Heading</h2>
      <p>First line of text</p>
    </div>
<!--     second slide -->
    <div class="bb_slide_text bb_slide_text2">
      <h2>Second Heading</h2>
      <p>Second Line of text</p>
    </div>
  </div>
</section>

从这里开始，您应该注意，如果宽度不够宽，两个框可能会重叠，并且其他兄弟可能会站在同一区域...那么您的下一个问题是什么 :) ？ 你可能一开始就不需要绝对的

【讨论】：