center form and div horizontally and vertically using pure javascript or pure css
Question
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.
4 answers
solution1
2 2014-05-21 12:50:33
With this CSS you can center it horizontally and vertically, supported in all browsers. Only bad thing about it is that you require fixed width and height, ofcourse you can format this to javascript and get the height and width of the element, but the trick is the same:
#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*/
}
Assuming you have a variable height, you will have to use JavaScript:
var elemStyle = document.getElementById("yourDivId").style;
elemStyle.marginTop = elemStyle.height / 2
Note: javascript above is just a sample and might not work directly, but it gives you an idea on how to implement it.
solution2
2 2014-05-21 13:07:01
For placing div in middle of horizontal give some width to the div, and margin-left, margin-right as auto
#mydiv{
width:200px;
margin-left:auto;
margin-right:auto;
background-color:#f4f4f4;
}
for making vertical in 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"
solution3
0 2014-05-21 13:00:25
so try this:
//this will center in vertical
#form
{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
solution4
0 ACCPTED 2014-05-22 08:36:00
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.