如何使div始終使用CSS浮動視口中心

目標是讓包含兩個圖像的div始終處於浮動視口的中間位置。有沒有辦法做到這一點，而不必做媒體查詢調整每種類型的屏幕的邊緣和底部？感謝您提前幫助。如何使div始終使用CSS浮動視口中心

body { 
 
    background: url(../images/willscape-bg.png); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    /* background-position: center top; */ 
 
    background-attachment: fixed; 
 
} 
 

 
.container { 
 
    height: 100vh; 
 
} 
 

 
.willscape-holder { 
 
    width: 100%; 
 
    max-width: 350px; 
 
    margin: 0 auto; 
 
    padding: 0 20px; 
 
} 
 

 
#willscape-logo { 
 
    padding: 0 60px; 
 
    width: 100%; 
 
} 
 

 
#willscape-title { 
 
    width: 100%; 
 
    max-width: 500px; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="willscape-holder"> 
 
     <a href="" target="_blank"><img class="img-responsive" id="willscape-logo" src="assets/images/willscape-logo.png" /></a> 
 
     <a href="" target="_blank"><img class="img-responsive" id="willscape-title" src="assets/images/willscape.png" /></a> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-08-15 willking

你可以使用顯示：表/表小區;屬性

https://www.w3.org/TR/CSS2/tables.html

17.2 CSS表模型

的CSS表模型是基於HTML4表模型，其中一個表的結構密切的平行的表的視覺佈局。在此模型中，表格由可選標題和任意數量的單元格行組成。由於作者在文檔語言中明確指定了行，而不是列，所以表格模型被稱爲「行主要」。一旦指定了所有行，就會導出列 - 每行的第一個單元格屬於第一列，第二列屬於第二列，等等）。行和列可以在結構上分組，並且該分組反映在呈現中（例如，可以圍繞一組行來繪製邊界）。因此，表模型由表，標題，行，行組（包括標題組和頁腳組），列，列組和單元組成。

/* update*/ 
 
html { 
 
height:100%;/* equals min-height */ 
 
width:100%; 
 
table-layout:fixed ; /*if fixed, then width is width not min-width */ 
 
display:table; 
 
} 
 
body { 
 
display:table-cell; 
 
vertical-align:middle; 
 
/* end update */ 
 
    background: url(../images/willscape-bg.png); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    /* background-position: center top; */ 
 
    background-attachment: fixed; 
 
} 
 

 
.container { 
 
/* height: 100vh;*/ 
 
} 
 

 
.willscape-holder { 
 
    width: 100%; 
 
    max-width: 350px; 
 
    margin: 0 auto; 
 
    padding: 0 20px; 
 
} 
 

 
#willscape-logo { 
 
    padding: 0 60px; 
 
    width: 100%; 
 
} 
 

 
#willscape-title { 
 
    width: 100%; 
 
    max-width: 500px; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="willscape-holder"> 
 
     <a href="" target="_blank"><img class="img-responsive" id="willscape-logo" src="assets/images/willscape-logo.png" /></a> 
 
     <a href="" target="_blank"><img class="img-responsive" id="willscape-title" src="assets/images/willscape.png" /></a> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-08-15 06:07:09

您可以使用視口的高度和CSS計算功能來計算圖像上邊距：

.willscape-holder { 
    width: 100%; 
    max-width: 350px; 
    margin: 0 auto; 
    padding: 0 20px; 
    margin-top: calc((100vh - 500px)/2); 
}

其中500的2盒像素高度。

參考： https://plnkr.co/edit/c1QenriaFK8KatS02MrE?p=preview

來源

2017-08-15 06:05:26

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    /* don't forget to add prefixes */ 
    transform: translate(-50%, -50%); 
}

沒有別的需要，將始終居中無論元素或視口的大小。爲了更好的理解Centering with CSS

來源

2017-08-15 06:09:08

如何使div始終使用CSS浮動視口中心

回答

相關問題