Question

我有一个名为web form的{{1}}容器div，其中包含"content"，我希望这个容器web form都centered vertically 1}}和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）都是受欢迎的，任何想法都值得赞赏。

example

Answer 1

使用此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只是一个示例，可能无法直接使用，但它可以让您了解如何实现它。

Answer 2

将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"

Answer 3

所以试试这个：

//this will center in vertical 
#form
{
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}

Answer 4

我找到了一些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，我想要...谢谢。

中心形式和水平和垂直div使用纯JavaScript或纯CSS

4 个答案: