如何将一个<div>垂直居中？
可能重复：
用CSS垂直居中Div的最佳方式是什么？
这可能是一个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;">
这使控件水平居中在网页的顶部。
现在，我该如何垂直居中？
我试图应用此代码
它不起作用
这是我的整个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>
这解决了这个问题。 知道控制的高度和宽度，我使用了这个
<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;">
怎么样的事情如下？
<!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>
上一篇: How do I center a <div> vertically?
下一篇: Align div horizontally and vertically center to a page (responsive)