使用絕對定位在頁面上定位flexbox

Question

我有很多故障定心。所以基本上我想我的容器div在頁面的死點。我嘗試了一個包裝div的相對定位，並使我的容器div絕對定位與top:50%和left:50%，但現在整個右列（我的第三列）丟失，並且我的第二列的文本已經飛到了容器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財產如何幫助中心絕對定位的元素查看說明：Element will not stay centered, especially when re-sizing screen