把兩個重疊的盒子水平和垂直居中flex

我有兩個已知寬度和高度的盒子（div），並且希望將它們放在身體中，並符合以下要求。讓那些方框叫box1和box2。把兩個重疊的盒子水平和垂直居中flex

1）兩個盒子都應該垂直居中。

2）兩個箱子都應該水平放置，使它們重疊，並且box1保持在box2以外的50％。

3）box1 + box2應該是水平居中

我寫的代碼這一點，並取得了第一和第二，但不能做第三之一。

HTML代碼

<body> 
    <div class="content"> 
     <div class="boxes-container"> 
     <div class="box1"></div> 
     <div class="box2"></div> 
     </div> 
    </div> 
</body>

CSS部分

html { 
    height: 100%; 
} 

body { 
    background-image: -webkit-linear-gradient(blue, white); 
    background-image: -moz-linear-gradient(blue, white); 
    background-image: -o-linear-gradient(blue, white); 
    background-image: linear-gradient(blue, white); 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    height: 100%; 
} 

.content{ 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
} 

.boxes-container { 
    display: flex; 
    flex-direction: row; 
    /*justify-content: center;*/ 
    margin: auto; 
} 

.box1 { 
    background: blue; 
    box-shadow: 0 60px 80px 0 rgba(0,0,0,0.30); 
    border-radius: 10px; 
    width: 400px; 
    height: 271px; 
    margin: auto; 
    transform: translateX(50%); 
} 

.box2 { 
    background: #FFFFFF; 
    box-shadow: 0 60px 80px 0 rgba(0,0,0,0.30); 
    border-radius: 10px; 
    width: 740px; 
    height: 586px; 
    margin: auto; 
    /*transform: translateX(-30%);*/ 
    z-index: -1; 
}

來源

2017-03-02 bruce_wayne

代替在x軸平移BOX1 50％的，只是對x軸平移BOX1 25％和方框-25％在X軸上。這樣你就能在雙方獲得相同的空間。
將align-content：center添加到.boxes-container。

html { 
 
     height: 100%; 
 
    } 
 

 
    body { 
 
     background-image: -webkit-linear-gradient(blue, white); 
 
     background-image: -moz-linear-gradient(blue, white); 
 
     background-image: -o-linear-gradient(blue, white); 
 
     background-image: linear-gradient(blue, white); 
 
     display: flex; 
 
     flex-direction: column; 
 
     justify-content: center; 
 
     height: 100%; 
 
    } 
 

 
    .content{ 
 
     display: flex; 
 
     flex-direction: row; 
 
     justify-content: center; 
 
    } 
 

 
    .boxes-container { 
 
     display: flex; 
 
     flex-direction: row; 
 
     align-content: center; 
 
     margin: auto; 
 
    } 
 

 
    .box1 { 
 
     background: blue; 
 
     box-shadow: 0 60px 80px 0 rgba(0,0,0,0.30); 
 
     border-radius: 10px; 
 
     width: 400px; 
 
     height: 271px; 
 
     margin: auto; 
 
     transform: translateX(25%); 
 
    } 
 

 
    .box2 { 
 
     background: #FFFFFF; 
 
     box-shadow: 0 60px 80px 0 rgba(0,0,0,0.30); 
 
     border-radius: 10px; 
 
     width: 740px; 
 
     height: 586px; 
 
     margin: auto; 
 
     /*transform: translateX(-30%);*/ 
 
     transform: translateX(-25%); 
 
     z-index: -1; 
 
    }

<body> 
 
    <div class="content"> 
 
     <div class="boxes-container"> 
 
     <div class="box1"></div> 
 
     <div class="box2"></div> 
 
     </div> 
 
    </div> 
 
</body>

來源

2017-03-02 07:38:07

都轉換爲25％我感謝工作 –

把兩個重疊的盒子水平和垂直居中flex

回答

相關問題