使用纯 javascript 或纯 css 水平和垂直居中表单和 div答案

【问题标题】：center form and div horizontally and vertically using pure javascript or pure css使用纯 javascript 或纯 css 水平和垂直居中表单和 div
【发布时间】：2014-07-10 02:51:16
【问题描述】：

我有一个web form 和一个名为"content" 的div 容器，其中包含一个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），任何想法都值得赞赏。

【问题讨论】：

但是你有没有在中心？
是假的，因为使用
和 margin: 0 auto 我模拟了一个居中的 div 但它是假的......一个技巧......

标签： javascript html css centering

【解决方案1】：

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

【讨论】：

我只考虑我的代码，不能在 Internet Explorer 7/8 上工作，而在 Internet Explorer 9 或更高版本上工作，如果应用于非常大的页面可能需要几秒钟才能呈现位置div ...其余的都可以！

【解决方案2】：

为了将 div 放置在水平的中间，给 div 一些宽度，并将 margin-left、margin-right 设置为 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"

【讨论】：

这是我的错误.. 我不小心把 clientHeight 作为高度。现在它的工作。
日期和时间：21/05/2014 16.49.25 错误：TypeError：elm 为 null 源文件 localhost/eml/form.php 行：26 - elm.style.marginTop = (parseInt(y)-elm. clientHeight)/2 +"px"
我认为您没有 id 为“mydiv”的 div，这就是它给出的错误。检查一次。如果可能的话，在 jsfiddle 中发布你的代码。
read this code partial working... where is the error? 我有 div id="content" 而不是 "mydiv"...这很明显...谢谢...
我读了你的代码，你得到了正确的宽度和高度，但是在减去它给出的 NaN 值的同时，这可以通过放置这些行来消除“body_height = parseInt(body_height) body_width = parseInt(body_width) div_height = parseInt(div_height) div_width = parseInt(div_width) " 在该链接中的第 18 行代码之后。

【解决方案3】：

所以试试这个：

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

【讨论】：

我也试过这个技巧，但没有运气......表格变得非常高......看起来很糟糕......谢谢。

【解决方案4】：

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

【讨论】：

请注意，高度是自动的，因为我的 css 中没有高度，因为 div 是由 php 生成的，宽度可能由 php 更改...所以我不能在 css 中使用固定位置，否则我在我的项目开始时就这样做了...但是谢谢。
正如我所说，您可以使用 javascript 检索高度，然后将其应用于 CSS（当然除以 2 之后）。我已经编辑了我的答案来帮助你。
和 onload="CenterDiv();" with .content {margin-left: auto;边距右：自动； } 并将 id="content" 添加到 div "content" ...