如何让一些文本出现在屏幕中间的一个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/

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

我认为垂直对齐会工作，但它不会做

答

变化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; 
}

它很近但水平对齐丢失 – 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; 
}

答

使用％定位然后使用负边距是一种解决方案。使用这种方法是更好的方法，因为它不会中断窗口/框架大小调整的布局。

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/，调整框架，看看它是如何工作的。

答

变化display到table在div，并table-cell在p。如果你想围绕文本边框则只需添加一个span围绕它，并给它的是边界：http://jsfiddle.net/azEaq/11/

这一切都是完全合法的CSS和你不使用表格这里（不好的做法，对吧？） - 你”只需将显示更改为模仿表。当你想要居中的区块没有预定义的高度时，这种技术是很好的 - 就像你提出的那样。

如何让一些文本出现在屏幕中间的一个div，占据整个屏幕

相关推荐