垂直对齐:中间，位置:绝对

本文介绍了垂直对齐:中间，位置:绝对的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想覆盖文字.现在我有: http://jsfiddle.net/9DLyE/9/但在此示例中，vertical-align:middle不起作用.我尝试使用display:table;并显示:table-cell；但这不适用于绝对位置.如何在 http://jsfiddle.net/9DLyE/9/中实现它?

I would like overlay with text. Now i have: http://jsfiddle.net/9DLyE/9/but in this example not working vertical-align: middle. I try use display: table; and display: table-cell; but this not working with position absolute.How can i make it in http://jsfiddle.net/9DLyE/9/ ?

<div id="main">
    <div>TITLE</div>
    <div>BODY</div>
    <div>COMMENT</div>
    <div><textarea></textarea></div>
    <div id="overlay">@@@@@@</div>
</div>
<button>overlay</button>

#main {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position:relative
}
#overlay{
    background:rgba(0, 84, 214, 0.5);
    height:100%; width:100%;
    position:absolute;
    top:0; left:0;
    display:none;
    text-align: center;
    vertical-align: middle;
}

推荐答案

而不是 vertical-align:middle; 为叠加层提供与您的主div相同的行高:

Instead of vertical-align: middle; give the overlay a line height that is the same as your main div:

#overlay {
    line-height: 200px; // the height of #main
}

演示

这篇关于垂直对齐:中间，位置:绝对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！