Question

可能重复：
What's The Best Way of Centering a Div Vertically with CSS

这可能是CSS问题，也可能是JavaScript问题，也可能是HTML问题。

如何垂直居中？

我设法水平对齐Div对象。我就是这样做的。我得到了我想要居中的对象的宽度和高度（XAML CODE）

<Grid  Background="White" Height="300" Width="738" VerticalAlignment="Center" HorizontalAlignment="Center">

然后，在承载silverlight控件的html文件中，我这样做了：

<div id="silverlightControlHost" style="width:738px; height: 300px;  margin-top:auto; margin-bottom:auto;   margin-left: auto; text-align:center; margin-right: auto;">

将控件水平居中放在网页顶部。

现在，我该如何垂直居中？

我尝试申请this code

它不起作用

这是我的整个HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
    <title>SilverlightApplicationThree</title>
    <style type="text/css">
    html, body {
        height: 100%;
        overflow: auto;
    }
    body {
        padding: 0;
        margin: 0;
    }
    #silverlightControlHost {
        height: 100%;
        text-align:center;
        margin-left: auto; 
        margin-right: auto;
    }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {

// vertical align function
$.fn.vAlign = function() {
    return this.each(function(i){
        var ah = $(this).height();
        var ph = $(this).parent().height();        
        var mh = Math.ceil((ph-ah) / 2); //var mh = (ph - ah) / 2;
        $(this).css('margin-top', mh);
    });
};

$('.silverlightControlHost object').vAlign();

});

</script>

</head>
<body><center>
    <form id="form1" runat="server">

    <div id="silverlightControlHost" style="width:738px; height: 300px;  margin-top:auto; margin-bottom:auto;  margin-left: auto; text-align:center; margin-right: auto;">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" >
          <param name="source" value="Bin/Debug/SilverlightApplicationThree.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="4.0.50826.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
              <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
        </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
        </div>

    </form>
    </center>
</body>
</html>

这解决了这个问题。知道了控件的高度和宽度，我使用了this

[img]http://cdn.css-tricks.com/wp-content/uploads/2007/11/centered.gif[/img]

    <style type="text/css">
    html, body {
        height: 100%;
        overflow: auto;
        top:50%;
    }
    body {
        padding: 0;
        margin: 0;
    }
    #silverlightControlHost {
        height: 100%;
        text-align:center;
        margin-left: -369px; 
        left:50%;
        margin-right: auto;
        margin-top:-150px;
        position:fixed;
        top:50%; 

    }
    </style>
<div id="silverlightControlHost" style="width:738px; height: 300px; margin-bottom :auto;  text-align:center; margin-right: auto;">

Answer 1

如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
    <style type="text/css">
        html, body {
            position: relative;
            margin: 0;
            height: 100%;
            padding: 0;

            background: black;
        }
        .wrap {
            /* Place top of wrap at center of page */
            position: absolute;
            top: 50%; right: 0; left: 0;

            background: white;
        }
        .inner {
            /* Negative margin to bring back up page (half of height) */
            margin: -150px auto;
            width: 738px;
            height: 300px;

            background: yellow;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner">
        </div>
    </div>
</body>
</html>

如何将<div>垂直居中？</div>

1 个答案: