Question

我试图将我的部门垂直居中。

我需要能够将'margin-top'告诉分区的-50％。

我知道我做错了什么：（

由于

HTML

<body>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis quam non massa venenatis malesuada. Ut mollis, nibh id placerat euismod, magna lectus sodales lacus, nec ultrices.
</div>

CSS

body{
margin: 0 0 0 0;
width: 100%;
height: 100%;
padding: 0 0 0 0;
}
#content{
width: 100px;
left: 50%;
margin-left: -50px;
top: 50%; 
position: fixed;
background: #0C6;
}

的Javascript

$(document).ready(function() {

$('#content').each(function() {
    var parentHeight = $(this).parent().height();
    var thisHeight = $(this).height();
    var topmargin = (parentHeight - thisHeight) / 2;
    $(this).css("margin-top", topmargin);
});
})

Answer 1

保证金最高需要-50px，就像这样

margin-top = -(height / 2)px

Answer 2

在你的JSFiddle中，你忘了添加Jquery库！

$(document).ready(function() {

    $('#content').each(function() {
        var thisHeight = $(this).height();
        var topmargin = -(thisHeight) / 2;
        $(this).css("margin-top", topmargin);
    });
})

Answer 3

http://jsfiddle.net/N5gsW/7/

$(document).ready(function() {
    $('#content').each(function() {
        var topmargin = $(this).height() / 2;
        $(this).css("margin-top", -topmargin);
    });
})

使用margin-top垂直对齐

3 个答案: