javascript - 如何将元素放在垂直对齐的中间？

Question

我做了 DEMO使用 JSfiddle，所以请检查。

这显示了一条从右侧滑到最左侧的评论。
它显示在垂直对齐中间的上方一点点。

如何在中间显示它？
请修复并更新我的 JSfiddle

Javascript

function transition() {

        $('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
        $('.newsticker').append("<p style='margin-left:400px;opacity:0'>Hello! This is a test</p>");
        $('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);

}

setInterval(transition, 2000);

CSS

div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:100px;
}

.newsticker p{
    padding-left:10px;
    padding-right:10px;
    float:left;
    position:absolute;
}

HTML

<div class="newsticker"> 
</div>

Answer 1

首先通过以下方式重置浏览器默认样式表，如 margin 或 padding:

* {
    padding: 0;
    margin: 0;
}

然后将 line-height: 100px; CSS 声明添加到 .newsticker 元素:

div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:100px; /* --------  */
    line-height: 100px; /*  |  */
             /*   ^----------  */
}

JSFiddle Demo

更新

通过使用 CSS，几乎不可能实现这个目标。我创建了一个 jQuery 版本，它计算动态段落的 height 并设置 top 属性以使其位于其父项的中间。在这种情况下，需要对 CSS 做一点改动:

CSS:

div.newsticker {
    position: relative; /* Add relative position to the parent */
    overflow: hidden;   /* Hide the overflow */
}

.newsticker p {
    width: 100%;       /* Set the width of paragraph to '100%' or 'inherit' */
}

JavaScript/jQuery:

var newsticker = $('.newsticker'),
    maxHeight = newsticker.height();

function transition() {
    newsticker.find('p').animate({
        marginLeft : "400px",
        opacity : ".0"
    }, 600).fadeOut(100);

    newsticker.append(
        $('<p>').css({
            'margin-left' : '400px',
            'opacity'     : '0'
        // Put your text in .text() method:
        }).text('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam suscipit nihil voluptatibus maxime sit quam delectus eaque officiis cumque accusamus velit nesciunt deserunt veniam molestias alias? Eaque iste quia non.')
    ).find('p').each(function() {
        if ($(this).css('top') == 'auto')
        $(this).css('top',
            (maxHeight - $(this).height()) / 2
        );
    });

    newsticker.find('p').animate({"marginLeft":"0px","opacity":"1"}, 600);
}
setInterval(transition, 2000);

这是 JSFiddle Demo .