我想顯示一個垂直居中的加載微調框，如網頁中這些https://github.com/jlong/css-spinners之一。按照該頁面上的codepen.io鏈接查看它們的運動。垂直居中加載微調框

我該怎麼做通過CSS？考慮我正在處理基於Python，Twitter Bootstrap和Polymer的Google App Engine應用程序。

2014-10-19 lowcoupling

讓我們假設你使用「Plus」微調。您可以在覆蓋整個頁面的固定位置DIV把這個包：

<div id="pluswrap"> 
    <div class="plus"> 
    Loading... 
    </div> 
</div>

既然你可能需要使用的時間不同紡紗廠，它有不同的寬度，在CSS不應該硬編碼的寬度。您可以在Flexbox中垂直放置一個項目，然後使用該項目上的margin: 0 auto;進行水平居中。

#pluswrap { 
position: fixed; 
width: 100%; 
height:100%; 
display: flex; 
align-items: center; 
top: 0; 
} 

.plus { 
    display: flex; 
    margin: 0 auto; 
}

這樣，您就可以均勻膚色的背景，使其半透明等

這裏有一個JSFiddle

來源

2014-10-19 15:56:20

謝謝，它的工作原理。它也是垂直居中，但不是水平:(我不明白爲什麼 – lowcoupling 2014-10-19 16:49:11

如果你把它包裝在一個固定位置的flexbox，我不明白爲什麼它不應該水平居中。你能分享代碼或頁面來幫助找出問題所在？ – 2014-10-19 18:02:58

justify-content：center;！ – lowcoupling 2014-10-19 18:11:18

我不知道任何關於谷歌應用程序引擎我害怕，但集中一個具有寬度和高度的元素很容易。

我認爲這是一個固定的定位元素，所以只需使用top，right，left和bottom，然後使用margin：auto來垂直和水平居中。

例如

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style> 
.spinner{ 
    position:fixed; 
    z-index:99;/* make higher than whatever is on the page */ 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    background:red; 
    width:100px; 
    height:100px; 
} 
</style> 
</head> 

<body> 
<div class="spinner"></div> 
</body> 
</html>

來源

2014-10-19 15:30:49

HTML

<div id="pluswrap"> 
    <div class="plus"> 
    Loading... 
    </div> 
</div>

CSS

#pluswrap { 
    position: fixed; 
    width: 100%; 
    height:100%; 
    display: flex; 
    top: 0; 
} 

.plus { 
    margin: auto; 
}

只有display:flex父母和margin: auto將做所需的事情。

這是JS Fiddle

來源

2017-02-13 15:28:46 Gags

垂直居中加載微調框

回答

HTML

CSS

相關問題