html - flex 盒在页面上居中，具有绝对定位

我在集中精力方面遇到很多麻烦。所以基本上我希望我的容器div位于页面的中心。我尝试了一个包装器div相对定位，并使用top:50%和left:50%使我的容器div绝对定位，但是现在缺少了整个右列（我的第三列），第二列的文本已经超出了容器div的范围。 。在这一点上，我所做的一切似乎都与我的预期背道而驰。.我试图脱下margin: auto，但这只会使问题变得更糟。在图片中，我的容器div位于屏幕底部附近，我不知道为什么。但我的最终目标是将其居中放置在页面的中心，并能够在其上放置百分比的高度和宽度。

*{
 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;
    }
}

<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>

最佳答案

您几乎在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