使用绝对定位在页面上居中定位flexbox

Question

我在中心方面遇到了很多麻烦。所以基本上我希望我的容器div位于页面的死点。我尝试使用包装器div相对定位并使用top:50%和left:50%使我的容器div绝对定位，但是现在整个右列（我的第三列）都缺失了，我的第二列是＆＃39; s文本已经飞到容器div之外。在这一点上，我所做的一切似乎都与我的预期相违背。我试图取消margin: auto但这只会让问题变得更糟。在图片中我的容器div靠近屏幕的底部，我不知道为什么。但我的最终目标是将其置于页面的中心位置，并能够在其上放置百分比高度和宽度。

＆＃13;

＆＃13;

*{
 margin: 0;

 }

html, body{
 height: 100%;
 }


#bigwrap{
 position: relative;
 height: calc(100vh - 150px);
 width: 100%;
}

.container {
 display:flex;
 position: absolute;
 flex-wrap:wrap;
 flex-direction:row;
 justify-content:flex-start;
 align-items:center;
 width: 80%;
 top: 50%;
 left: 50%;
 margin-left:  40%;
 height: 70%;
}

.container img{
 width: 50px;
 height: 50px;
}

.left {
 display: flex;
 flex-flow: row wrap;
 align-items: flex-start;
 justify-content: center;
 order:1; 
 background:red;
 flex-basis:100%;
 height:100%;
  }


  .left img{
 max-width: 100%;
  }


.middle {
 display:flex;
 flex-flow: row wrap;
 align-content: flex-start;
 justify-content: flex-start;
 order:3;
 background:green;
 flex-basis: 100%;
 height:100%;
 }
.right {
 order:2; 
 background:yellow;
 flex-basis:100%; 
 height:100%;
}

.box{
 display: flex;
 flex-flow: row wrap;
 align-items: flex-start;
 justify-content: flex-start;
 height: 200px;
 width: 200px;
}




@media screen and (min-width:600px) {
   .container {
       flex-wrap:nowrap;
   } 

    .left {
        flex-basis:1;
        order:1;
    }
    .middle {
        flex-basis:1;
        order:2;
    }
    .right {
        flex-basis:1;
        order:3;
    }
}

＆＃13;

<div id="bigwrap">
       <div class="container">
        <div class="left">
            <img src="cat1.jpeg" alt="cat">
            <img src="cat1.jpeg" alt="cat">
           
        </div>
        <div class="middle">
            <div class="box">`
               <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief </p>


            </div>

              <div class="box">`
               <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief </p>


            </div>

        </div>

        <div class="right">
            
        </div>
    </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你几乎在那里top: 50%和left: 50%。

您还需要添加transform规则并移除margin-left: 40%。

.container {
    display: flex;
    position: absolute;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); /* NEW */
    /* margin-left: 40%;                REMOVE */
    height: 70%;
}

有关transform属性如何帮助将绝对定位元素居中的说明，请参阅：Element will not stay centered, especially when re-sizing screen