我有一个web form与div容器称为"content"包含web form，我想有这个容器centered vertically和horizontally但我无法获得这种效果，我正在寻找一个javascript或纯css解决方案。
example.html的
<html>
<body>
<br><br><br><br><br><br>
<div id="content">
<form action="..." name="...">
</form>
</div>
</body>
</html>
example.css
#content {
font-family: Arial, Helvetica, FreeSans, 'Nimbus Sans L', sans-serif;
font-size: 15px;
font-weight: bold;
line-height: normal;
font-style: normal;
font-variant: normal;
color: #E6E6FA;
background-color: #191D26;
background-image: url("bkg-3.jpg");
background-repeat: repeat;
border: #E6E6FA 1px solid;
border-radius: 20px;
width: 430px;
padding: 3px;
margin: 0 auto;
}
我也试过使用纯css解决方案如下：
#content {
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
但在IE 9.0下，我看到一个奇怪的行为......任何方法（javascript或纯css）是受欢迎的，任何想法都表示赞赏。
使用此CSS，您可以水平和垂直居中，在所有浏览器中都支持。唯一不好的是你需要固定的宽度和高度，当然你可以将其格式化为javascript并获得元素的高度和宽度，但技巧是相同的：
#form {
width: 500px;
height: 800px;
position: absolute;
top:50%;
left:50%;
margin-top:-400px; /*half of the height*/
margin-left:-250px; /*half of the width*/
}
假设你有一个可变高度，你将不得不使用JavaScript：
var elemStyle = document.getElementById("yourDivId").style;
elemStyle.marginTop = elemStyle.height / 2
注意：上面的javascript只是一个示例，可能无法直接使用，但它可以让您了解如何实现它。
将div放在水平中间给div增加一些宽度，margin-left，margin-right as auto
#mydiv{
width:200px;
margin-left:auto;
margin-right:auto;
background-color:#f4f4f4;
}
在js中制作垂直，
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
// alert(y); //window height
elm = document.getElementById('mydiv')
elm.style.marginTop = (parseInt(y)-elm.clientHeight)/2 +"px"
试试这个：
//this will center in vertical
#form
{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
我发现了一些css和javascript解决方案。
HTML：
<div class="content">
etcetera...
etcetera...
etcetera...
</div>
CSS：
.content {
width: 430px;
}
JavaScript的：
<script type="text/javascript">
window.onload = function() {
var div_width = document.getElementsByClassName('content')[0].offsetWidth;
var div_height = document.getElementsByClassName('content')[0].offsetHeight;
var set_width = div_width/2;
var set_height = div_height/2;
document.getElementsByClassName('content')[0].style.height = div_height+'px';
document.getElementsByClassName('content')[0].style.width = div_width+'px';
document.getElementsByClassName('content')[0].style.position = 'absolute';
document.getElementsByClassName('content')[0].style.top = '50%'
document.getElementsByClassName('content')[0].style.left = '50%';
document.getElementsByClassName('content')[0].style.marginLeft = -set_width+'px';
document.getElementsByClassName('content')[0].style.marginTop = -set_height+'px';
}
</script>
最后这对我有用，div自动在centered和horizontal vertical我想要...谢谢。