Zentrieren Sie ein div auf die Seite, während Sie inline mit einem anderen div sind

Question

Ich muss ein Element auf die Mitte des Bildschirms ausrichten, während ein Element auf der linken Seite davon hat.

Ich kann dies mit Float links erreichen und die Polsterung des mittleren Elements auf die Breite des schwebenden Elements anpassen. Aber in diesem Fall werde ich nicht immer die Breite wissen.

Ich weiß nicht, wie ich das besser erklären könnte. Suchen haben mich gescheitert.

Answer 1

können Sie CSS verwenden flex die gleiche flex Guide

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100%; 
 
} 
 

 
.box-1 { 
 
    padding: 2%; 
 
    background: tomato; 
 
    flex: 0 0 10%; 
 
}

<div class="wrapper"> 
 
    <div class="box-1">1</div> 
 
    <div class="box-1">2</div> 
 
</div>