Search code examples
javascripthtmlcsscentering

center form and div horizontally and vertically using pure javascript or pure css

I have a web form with a div container called "content" that contains a web form, I'd like to have this container centered both vertically and horizontally but I cannot obtain this effect, I'm looking for a javascript or pure css solution.

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;
}

I tried also using pure css solution as below:

#content {
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

but under IE 9.0 I see a strange behavior... any method (javascript or pure css) is welcome and any ideas is appreciated.

example

Solution

  • I found some css and javascript solutions.

    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>

    Finally this works for me and the div is centered automatically in horizontal and vertical as I wanted... thanks.