Zentrierung Flexbox auf Seite mit absoluter Positionierung

Question

Ich habe eine Menge Probleme mit der Zentrierung. Also im Grunde will ich mein Container div im toten Zentrum der Seite. Ich versuchte, eine Wrapper div relative Positionierung und machen meine Container div absolute Positionierung mit top:50% und left:50%, aber jetzt fehlt die ganze rechte Spalte (meine dritte Spalte), und meine zweite Spalte Text ist außerhalb des Containers div geflogen. An diesem Punkt scheint es so, als ob alles, was ich tue, gegen das, was ich erwartet habe, kontraintuitiv ist. Ich habe versucht, margin: auto zu entfernen, aber das hat das Problem nur noch verschlimmert. Auf dem Bild ist mein Container div am unteren Bildschirmrand und ich weiß nicht warum. Aber mein ultimatives Ziel ist es, den Mittelpunkt auf der Seite zu zentrieren und prozentuale Höhe und Breite darauf zu setzen.

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

Sie waren fast mit top: 50% und left: 50%. Sie müssen auch eine transform Regel hinzufügen und die margin-left: 40% entfernen.

.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%; 
} 

Eine Erklärung dafür, wie die transform Eigenschaft hilft, sehen ein absolut positioniertes Element zum Zentrum: Element will not stay centered, especially when re-sizing screen