如何將一個矩形div居中放在另一個矩形div內

我正在試圖製作一個矩形div，它的視口寬度爲95％，高度爲20％。但我想要另一個矩形div，它垂直和水平居中，並有一個略微2px的邊距。如何將一個矩形div居中放在另一個矩形div內

.Outer { 
    border: 1px solid #ccc; 
    max-width: 95vw; 
    max-height: 20vh; 
    width: 95vw; 
    height: 20vh; 
    margin: auto; 
    display: block; 
    } 
.Inner { 
    border: 1px solid hotpink; 
    width: 95%; 
    height: 95%; 
    margin: auto; 
    }

來源

2016-02-16 Hunterisabeast

查看所有這些**相關的**項目在右側。嘗試檢查出來。 –

這取決於要求。但根據問題，這是答案。請看看，讓我知道在嘗試使用相對測量單位只是在你正在處理一個響應式設計的情況下，任何問題

.Outer { 
 
    width: 95vw; 
 
    height: 20vh; 
 
    border: 1px solid #ccc; 
 
    
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.Inner { 
 
    border: 1px solid hotpink; 
 
    
 
    position: absolute; 
 
    top: 10px; 
 
    right: 10px; 
 
    bottom: 10px; 
 
    left: 10px; 
 
}

<div class="Outer"> 
 
    <div class="Inner"></div> 
 
</div>

來源

2016-02-16 19:27:50 w3debugger

的情況。 .outer框爲display: table，Inner爲display: table-cell。他們坐在完美地結合在一起，你的要求的2px保證金由2px的填充從.Outer

html { 
 
    box-sizing: border-box; 
 
    font: 500 16px/1.428'Consolas'; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    position: relative; 
 
    font-size: 1rem; 
 
    line-height: 1; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.Outer { 
 
    position: absolute; 
 
    top: 20%; 
 
    left: 3%; 
 
    outline: 1px solid #ccc; 
 
    max-width: 95vw; 
 
    max-height: 20vh; 
 
    width: 95vw; 
 
    height: 20vh; 
 
    margin: auto; 
 
    display: table; 
 
    padding: 2px; 
 
} 
 
.Inner { 
 
    border: 1px solid hotpink; 
 
    width: 95%; 
 
    height: 95%; 
 
    margin: auto; 
 
    display: table-cell; 
 
}

<section class="Outer"> 
 
    <section class="Inner"></section> 
 
</section>

來源

2016-02-16 19:34:49 zer00ne

我不是100％，這是提供你想找的，因爲這有幻數，但這裏是我使用您提供的代碼提出的JSFiddle。

#Outer { 
 
    border: 1px solid #ccc; 
 
    max-width: 95vw; 
 
    max-height: 20vh; 
 
    width: 95vw; 
 
    height: 20vh; 
 
    margin: auto; 
 
    display: block; 
 
    position: relative; 
 
    } 
 
#Inner { 
 
    border: 1px solid hotpink; 
 
    width: 95%; 
 
    height: 50%; 
 
    position: aboslute; 
 
    margin-top: 5vh; 
 
    margin-left: 2.5vw; 
 
    }

<div id=Outer> 
 
    <div id=Inner> 
 
    </div> 
 
    </div>

JSFiddle

希望這有助於你能與它周圍亂七八糟的觀點，而不是幻數使用百分比。

來源

2016-02-16 19:40:50

當我想垂直居中一個div時，我有幾個班可以幫助我做到這一點。

.outer { 
 
    border: 1px solid #ccc; 
 
    max-width: 95vw; 
 
    max-height: 20vh; 
 
    width: 95vw; 
 
    height: 20vh; 
 
    margin: auto; 
 
    display: block; 
 
    } 
 

 
    .inner { 
 
    border: 1px solid hotpink; 
 
    width: 95%; 
 
    height: 90%; 
 
    margin: auto; 
 
    } 
 

 
    .valign-wrap { 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    } 
 

 
    .valign-wrap .valign { 
 
    display: block; 
 
    }

<div class="outer valign-wrap"> 
 

 
    <div class="inner valign center"></div> 
 
    
 
</div>

JSFiddle

我總是建議這些類添加到您的項目，他們是非常有用的。祝你好運！

來源

2016-02-16 19:53:07

如何將一個矩形div居中放在另一個矩形div內

回答

相關問題