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

Question

我很难集中注意力。所以基本上我希望我的容器 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>

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 属性如何帮助绝对定位元素居中的解释，请参阅：

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

Centering flexbox on page with absolute positioning

html

css

centering

flexbox