Question

一个高度不固定的div，里面的文字如何垂直居中？

<div>
<div style="height:50%">
这里是文字

</div>
</div>
恳请高手解答！

Answer 1

通过js吧，先获取这个div的高度，然后通过js设置这个div的line-height=div高度

Answer 2

就用line-height:+你的div高度

Answer 3

<div>
<div style="height:50%;text-align:center;">
<span style="display:inline-block; vertical-align:middle">这里是文字</span>
</div>
</div>

Answer 4

/* CSS部分 */
#div7{ height:200px; background:#000; }
#div7>div{ height:50%; position:relative; background:#F00; }
/* 如果不要求横向居中请把 left:50% 去掉，并把 transform:translate(-50%,-50%) 改为 transform:translateY(-50%) */
#div7>div>div{ background:#06C; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

<!-- HTML部分 -->
<div id="div7">
    <div>
        <div>
            这里是文字
        </div>
    </div>
</div>

Answer 5

<div>
<div style="height:50%;text-align:center;">
<span style="display:inline-block; vertical-align:middle">这里是文字</span>
</div>
</div>

这个是水平和垂直都居中。如果不要水平居中 删除text-align:center;