別のdivとインラインでページのdivを中心にして

Question

要素を画面の中央に配置し、要素を左側に配置する必要があります。

フロートを左にして、浮動要素の幅に合わせて中央要素のパディングを設定すると、これを実現できます。しかし、この場合、私はいつも幅を知っているとは限りません。

私はこれを説明することがいかに良いかわかりません。検索が失敗しました。

Answer 1

あなたは多くの方法がありますが、同じ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>