我會推薦css flex
屬性。它使您能夠集中具有display: flex
屬性的父元素的子元素。非常漂亮。您可以按照以下方式實現水平/垂直居中。
這裏是負有維護長寬比說明另一篇文章: Maintain the aspect ratio of a div with CSS
html, body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.center {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
align-self: center;
flex: 1 0 auto;
height: 100%;
width: 100%;
}
.center > div {
align-self: auto;
background-color: #aaa;
}
.container {
width: 100%;
padding-bottom: 75%; /* achieves 4:3 aspect ratio */
margin: 0 20px;
background-color: yellow;
}
.centered {
max-width: 800px;
max-height: 600px;
width: 100%;
height: 100%;
}
<!-- ... -->
<div class='center'>
<div class='container'>
<!-- ensure your .centered div has
some specified height & width -->
<div class='centered'>
Your content
</div>
</div>
</div>
<!-- ... -->
JSBin Demo Here
附上預期結果的圖紙可能會幫助 –
@Fez Vrasta認真嗎?我認爲要求清單非常清晰,完全沒有歧義。 – matteo
我想你可以自己判斷答案的數量。如果你想要一個好的答案,你需要提出一個好問題。 –