Question

我有一个绝对定位的div。

我正试图将它与flex垂直对齐：

.container{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    ....

HTML：

<div class="container">
    <div>
        <p>hello</p>
        <p>to</p>
        <p>you</p>
        ...

这可能吗？我还能如何垂直对齐.container？请注意，我不想使用拉伸方法。

 position: absolute;
 top: 0;
 bottom: 0;
 left:0;
 right:0;
 margin: auto;

容器也可以是任何高度。

P.S。请不要表。

Answer 1

要使.container元素以flex为中心，您需要将父设为灵活容器。

justify-content和align-items属性在Flex容器上声明，但适用于子元素（弹性项）。

但是，由于.container绝对定位，因此flex不会起作用：

An absolutely-positioned child of a flex container does not participate in flex layout.

作为替代方案，您可以尝试：

html { height: 100%; }

body {
   height: 100%;
   position: relative;
}

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

有关此居中方法的说明，请参阅此帖：

Element will not stay centered, especially when re-sizing screen

Answer 2

您的代码工作正常，垂直对齐不需要position: absolute。请参阅下面的代码段。 请注意，高度就是显示垂直对齐的位置;没有必要这样做。

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid red;
    height: 200px;
  }

<div class="container">
  <div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
  </div>
</div>

使用flexbox垂直对齐绝对定位的元素

2 个答案: