如何讓一些文本出現在屏幕中間的一個div，佔據整個屏幕

我試圖讓一個div將佔用整個屏幕，並顯示單詞加載...在它上面。我希望文字在中心水平和垂直。如何讓一些文本出現在屏幕中間的一個div，佔據整個屏幕

我設法讓它水平對齊，但文字在屏幕的頂部而不是中間。

的代碼是：

<div id="loadingdiv" class="screenMask"><p>Loading . . .</p></div> 

div.screenMask 
{ 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    overflow-y: auto; 
    z-index: 1000; 
    background-color: #000000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    text-align: center; 
    font-size: 28px; 
} 

div.screenMask p 
{ 
border: 1px solid red; 
    color: white; 
    display: inline; 
    z-index: 1001; 
vertical-align: middle; 
}

這是的jsfiddle：

http://jsfiddle.net/azEaq/

任何人都知道我怎樣才能在垂直中間位置的文本？

我認爲垂直對齊會工作，但它不會做

來源

2012-07-06 AnonyMouse

變化div.screenMask p來......

div.screenMask p 
{ 
border: 1px solid red; 
position:absolute; 
top:50%; 
color: white; 
display: inline; 
z-index: 1001; 
}

然後，如果你想把它移到加起來負邊距幾個像素。

UPDATE 如果您不需要的紅色邊框（如果它是用於故障排除）使用這個......

div.screenMask 
{ 
position: fixed; 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%; 
overflow-y: auto; 
z-index: 1000; 
background-color: #000000; 
opacity: 0.7; 
filter: alpha(opacity=70); 
text-align: center; 
font-size: 28px; 
} 

div.screenMask p 
{ 
border: 1px solid red; 
color: white; 
position:absolute; 
height:60px; 
width:100%; 
text-align:center; 
top:50%; 
margin:-30px 0 0 0px; 
}

來源

2012-07-06 03:25:42

它很近但水平對齊丟失 – AnonyMouse 2012-07-06 03:28:30

更新了我的答案。還有其他方法，如果這不適合你。 – 2012-07-06 03:42:36

這會工作，只是增加top: 50%;和position: absolute;到div.screenMask p類您css，你可以在這裏看到更新http://jsfiddle.net/azEaq/5/

CSS標記看起來像：

div.screenMask p 
{ 
    border: 1px solid red; 
    color: white; 
    display: inline; 
    z-index: 1001; 
    top: 50%; 
    position: absolute; 
}

來源

2012-07-06 03:27:44 Luis

使用％定位然後使用負邊距是一種解決方案。使用這種方法是更好的方法，因爲它不會中斷窗口/框架大小調整的佈局。

div.screenMask p 
    { 
     border: 1px solid red; 
     color: white; 
     display: inline; 
     z-index: 1001; 
     position:absolute; 
     height:30px; 
     top:50%; 
     margin:-15px 0 0 0px; 
     vertical-align: middle; 
    }

這裏看看http://jsfiddle.net/azEaq/9/，調整框架，看看它是如何工作的。

來源

2012-07-06 03:28:25

變化display到table在div，並table-cell在p。如果你想圍繞文本邊框則只需添加一個span圍繞它，並給它的是邊界：http://jsfiddle.net/azEaq/11/

這一切都是完全合法的CSS和你不使用表格這裏（不好的做法，對吧？） - 你」只需將顯示更改爲模仿表。當你想要居中的區塊沒有預定義的高度時，這種技術是很好的 - 就像你提出的那樣。

來源

2012-07-06 03:39:18 banzomaikaka

如何讓一些文本出現在屏幕中間的一個div，佔據整個屏幕

回答

相關問題