Html 将Div垂直居中放置在Div内

我编写了下面的程序来从数据库获取通知并显示它。情况是在

div.note

垂直居中显示

div

我尝试了

vertical align:middle

和

vertical align:center

，但都失败了。我发现它们是用于表格单元格的。所以我选择了这个

<?php
include("../common/config.php");
$query = "SELECT content FROM st_notifications";
$result = mysqli_query($dbc, $query) or die(mysqli_error($dbc));
while($row = mysqli_fetch_row($result))
{
    echo "<div class='note'><div style='word-wrap: break-word;'>".$row[0]."</div></div>";
}
?>
<script>
    $(function () {
        $(".note").each(function () {
            var note = $(this);
            var diff = 100 - ($("div", note).outerHeight() / 2);
            $("div", note).css({ 'margin-top': diff >= 0 ? diff : 0 });
        });
    });
</script>

Chrome调试器上的输出为：

您可以看到两个边距都是

100px

，而不是相对分配的

我读书。但我不知道如何将它与我的问题联系起来

而且解决方案似乎非常长

有人能告诉我哪里错了吗？提前谢谢

附言：

---

我通过直接调用元素和使用每个（）函数尝试了jQuery，这两个函数都给出了相同的结果。Chrome中没有关于JavaScripts或PHP的调试错误。

JQUERY解决方案

我正在使用我某天创建的此函数：

/**
 * Permits to center an element vertically in its parent
 * The div to center must exist before calling this function
 * @param : element => div to center
 * @param : offset => offset to apply
 * @param : parent => center into a parent, by default, window size is used
 */
function centerDivVertically(element,offset,parent)
{
    parent = parent || null;

    var myOffset = (offset != null) ? offset : 0;
    var height = window.innerHeight ? window.innerHeight : $(window).height();

    //Align to the parent
    if(parent != null)
        height = $(parent).height();

    var elementHeight = height - $(element).height();
    $(element).css('top',(elementHeight/2)+myOffset + 'px');    
}

//Usage
centerDivVertically('#myDiv',0,null);

---

JQUERY解决方案

我正在使用我某天创建的此函数：

/**
 * Permits to center an element vertically in its parent
 * The div to center must exist before calling this function
 * @param : element => div to center
 * @param : offset => offset to apply
 * @param : parent => center into a parent, by default, window size is used
 */
function centerDivVertically(element,offset,parent)
{
    parent = parent || null;

    var myOffset = (offset != null) ? offset : 0;
    var height = window.innerHeight ? window.innerHeight : $(window).height();

    //Align to the parent
    if(parent != null)
        height = $(parent).height();

    var elementHeight = height - $(element).height();
    $(element).css('top',(elementHeight/2)+myOffset + 'px');    
}

//Usage
centerDivVertically('#myDiv',0,null);

---

使用

显示：表格单元格将嵌套div垂直居中对齐


HTML

如果
div
是固定的

方式2

HTML

使用
显示：表格单元格将嵌套div垂直居中对齐


HTML

如果
div
是固定的

方式2

HTML

演示：
​

演示：
​
 将内部div的位置设置为绝对，顶部设置为50%。
使用位置和左上角属性来获得正确的位置。
如果有帮助的话，尝试将父div的位置设置为相对位置。
将内部div的位置设置为绝对，将顶部设置为50%。
使用位置和左上角属性来获得正确的位置。
如果有帮助，请尝试将父div的位置设置为相对位置。
-只需选择您需要的-只需选择您需要的谢谢您的朋友，但是为什么需要计算
窗口高度
？根据浏览器的不同，使用不同的方法计算窗口高度：''var height=window.innerHeight？window.innerHeight:$（window.height（）；这会得到与我相同的结果
top:100px
，它会给出
margin top:100px
@sdespontThank你的朋友，但是为什么你需要计算
window.height
？根据浏览器的不同，使用不同的方法计算窗高：'var height=window.innerHeight？window.innerHeight:$（window.height（）；这给出了与我相同的结果
top:100px
，它给出了
margin top:100px
@sdespontI同意@atifmohammedameanuddin。我正在为我的学院设计一个网页，我不想有任何不同的看法，请。我还提到我已经尝试过这些方法。@GopikrishnaS如果宽度固定，我可以给你另一个解决方案。我同意@AtifMohammedAmeenuddin。我正在为我的学院设计一个网页，我不想有任何不同的看法，请。我还提到，我已经尝试过这些方法。@GopikrishnaS如果宽度固定，我可以给你另一个解决方案对不起，将位置设置为绝对位置没有成功。对不起，将位置设置为绝对位置没有成功。
<div class="wrapper"><div class="inner">This is vertically centered</div></div>

div.wrapper {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    width: 300px;
    background-color: #ff0000;
    text-align: center;
}

div.inner {
    display: inline-block; /* This is optional */
}

<div class="container"><div class="float">This will work with fixed dimensions</div></div>

.container {
    width: 500px;
    height: 300px;
    background: #eee;
    position: relative;
}

.float {
    position: absolute;
    height: 50px;
    width: 150px;
    left: 50%;
    top: 50%;
    margin-left: -75px; /* Half Of Width */
    margin-top: -25px; /* Half Of Height */
    border: 1px solid #aaa;
}

.outer {
    width: Xpx;
    height: Ypx;
    border: 1px solid red;
}
.inner {
    width: 50%;
    height: 50%;
    background: blue;
    margin: 0 auto;
    margin-top: 25%;
}